前端构建工具 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, // 删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
    minifyJS: true, // 压缩页面JS
    minifyCSS: true, // 压缩页面css
};

gulp.task('html', () => {
    return gulp.src(host.path + '**/*.html')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '编译：'}))
        .pipe(htmlmin(htmlOptions))
        .pipe(gulp.dest(host.build))
});

// 压缩css + 添加版本号
gulp.task('mincss', () => {
    return gulp.src(host.path + 'css/*.*')
        .pipe(plumber())
        .pipe(debug({title: '编译：'}))
        .pipe(cleanCss())   //- 压缩处理成一行
        .pipe(rev())    //- 文件名加MD5后缀
        .pipe(gulp.dest(host.build + 'css'))  //- 输出文件本地
        .pipe(rev.manifest())   //- 生成一个rev-manifest.json
        .pipe(gulp.dest(host.build + 'css'));  //- 将 rev-manifest.json 保存到 rev 目录内
});
// 替换css路径
gulp.task('revcss', () => {
    return gulp.src([host.build + 'css/*.json', host.build + '**/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())   //- 执行文件内css名的替换
        .pipe(gulp.dest(host.build));  //- 替换后的文件输出的目录
});
gulp.task('css', (cb) => runSequence(['mincss'], ['revcss'])(cb));

// js转码
gulp.task('babel', () => {
    return gulp.src(host.path + '**/*.js')
        .pipe(plumber())
        .pipe(changed(host.build + 'js'))
        .pipe(debug({title: '编译：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest(host.build + 'js'))
});

// js压缩
gulp.task('js', () => {
    return gulp.src(host.path + 'js/**/*.js')
        .pipe(plumber())
        .pipe(changed(host.build + 'js'))
        .pipe(debug({title: '编译：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(host.build + 'js'))
});

// configjs转化压缩
gulp.task('configjs', () => {
    return gulp.src(host.path + 'config.js')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '编译：'}))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(host.build))
});

gulp.task('pageJs', (cb) => runSequence(['js'], ['configjs'])(cb));

// static库文件处理
gulp.task('static', function () {
    return gulp.src(host.path + 'static/**/*')
        .pipe(plumber())
        .pipe(changed(host.build + 'static'))
        .pipe(debug({title: '编译：'}))
        .pipe(gulp.dest(host.build + 'static'))
});

// 图片资源处理
gulp.task('img', () => {
    return gulp.src(host.path + 'img/**/*')
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(gulp.dest(host.build + 'img'))
});

// json处理
gulp.task('json', () => {
    return gulp.src(host.path + '**/*.json')
        .pipe(changed(host.build))
        .pipe(debug({title: '编译：'}))
        .pipe(gulp.dest(host.build))
});

// 其他文件
gulp.task('other', () => {
    return gulp.src([host.path + '*.html', host.path + '*.js'])
        .pipe(plumber())
        .pipe(changed(host.build))
        .pipe(debug({title: '编译：'}))
        .pipe(gulp.dest(host.build))
});

// 删除文件
gulp.task('clean', () => {
    del(host.build + '/css');
    del(host.build + '/js');
    del(host.build + '/pages');
    del(host.build + '/static');
    del(host.build + '/img');
    del(host.build + '/index.html');
    del(host.build + '/login.html');
    del(host.build + '/config.js');
    del(host.build + '/*.json');
});

// 构建
gulp.task('build', (cb) => runSequence(
    ['html'], ['css'], ['pageJs'], ['static'], ['img'],['json'],['other']
)(cb));

gulp.task('default', ['serve']);

/* 命令 */
gulp.task('h', () => {
    log(chalk.yellow(''));
    log(chalk.yellow('     开发环境：           gulp  或  gulp --env 0'));
    log(chalk.yellow('     删除文件：           gulp clean'));
    log(chalk.yellow('     检查js代码：         gulp lint'));
    log(chalk.yellow('     修复可修复js代码：   gulp lint-fix'));
    log(chalk.yellow(''));
});

5.开发部署流程

配置好package.json和gulpfile.js文件后。执行

npm install 

注意事项

如果 npm install 时速度过慢，可以用cnpm，（cnpm需要安装，自行Google）。

开发：

所有的修改都是在app文件夹内，build后生成编译后的文件。

gulp // gulp default

部署：

gulp clean

gulp build

此示例为日常使用过程总结，部分代码有待优化。