前端构建工具 Gulp 的使用总结

---

目录

• why
• 环境搭建
• gulp
• gulpfile.js文件解析
• 开发部署流程

1.why

• 自动清除缓存，自动刷新，加速开发调试过程 browserSync or browserSync国内

• js代码压缩，节省带宽。

• css文件，加入hash码，方便测试。（已知情况，js修改不用清缓存，css文件需要）

2.环境搭建

windows环境node安装,
可以参考该教程，Linux系统可以参考，
教程一,
教程二

注意事项

如果node下载速度过慢，可以考虑使用国内的node下载站。

3.gulp

中文官网

入门指南

• 全局安装 gulp：

$ npm install --global gulp

• 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

• 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

• 运行 gulp：

$ gulp

4.gulpfile.js文件解析

let gulp = require('gulp'),

    // html相关
    htmlmin = require('gulp-htmlmin'), // 去掉html注释

    // css相关
    cleanCss = require('gulp-clean-css'),  // 压缩css

    // js相关
    uglify = require('gulp-uglify'),  // 压缩js
    babel = require('gulp-babel'),    // es6转码
    eslint = require('gulp-eslint'),  // 脚本检查

    // 判断文件是否修改
    changed = require('gulp-changed'),

    // 发生错误后继续进程
    plumber = require('gulp-plumber'),

    // 调试
    debug = require('gulp-debug'), // 打印经过pipe的文件名

    // 日志添加颜色
    chalk = require('chalk'),
    log = console.log,   // 打印

    // 删除文件
    del = require('del'), // 删除旧版本文件

    // 任务执行顺序
    runSequence = require('gulp-sequence'), // 串行任务

    // 服务器
    browserSync = require('browser-sync').create(), // -创建服务器

    //在pipe中使用if判断条件
    gulpif = require('gulp-if'),

    //命令行替换变量
    minimist = require('minimist'),

    // css添加版本号
    rev = require('gulp-rev'),  // 添加MD5后缀
    revCollector = require('gulp-rev-collector');  // 路径替换
    
// Environment setup 环境设置
/*
 * env----代表环境变量
 * 启动gulp命令的几种方式
 * gulp----执行默认操作（gulp --env 0）
 * 开发时直接执行gulp命令就行
 *
 * gulp --env 0-----开发
 *
 * 执行gulp则默认执行  gulp --env 0
 */


let knownOptions = {
    string: 'env',
    default: {env: process.env.NODE_ENV || '0'}
};

let options = minimist(process.argv.slice(2), knownOptions);


//web本地服务器配置
let host = {
    path: 'src/main/app/',   // 文件输出目录即开发目录
    build: 'src/main/webapp/',  // 项目构建目录
};

gulp.task('serve', () => {
    browserSync.init({
        proxy: 'http://192.168.0.103:8080',
        serveStatic: [host.path],
        browser: ['chrome'],
        files: [
            `${host.path}**/*.html`,
            `${host.path}**/*.css`,
            `${host.path}**/*.js`,
            `${host.path}img/!**/!*.*`
        ],
    });
});

// 代码检查
gulp.task('lint', () => {
    return gulp.src([host.path + 'js/**/*.js'])
        .pipe(eslint({
            configFile: '.eslintrc.js',
        }))
        .pipe(eslint.formatEach())
        .pipe(eslint.results(results => {
            log(chalk.gray(`Total Files: ${results.length}`));
            log(chalk.redBright(`Total Errors: ${results.errorCount}`));
            log(chalk.yellow(`Total Warnings: ${results.warningCount}`));
        }))
});

// 代码修复
const isFixed = (file) => {
    return file.eslint !== null && file.eslint.fixed;
};

gulp.task('lint-fix', () => {
    return gulp.src([host.path + 'js/**/*.js'])
        .pipe(eslint({
            fix: true,
        }))
        .pipe(gulpif(isFixed, gulp.dest(host.path + 'js')));
});

// 压缩html
let htmlOptions = {
    removeComments: true,   // 清除注释
    collapseWhitespace: true,  // 压缩html
    removeEmptyAttributes: false, // 删除所有空格作属性值  ==> 
    removeScriptTypeAttributes: false, // 删除