基于gulp搭建的前端自动化构建

基于gulp搭建的前端自动化构建，需要对gulp做文件路径配置，执行打包命令即可
官网链接：https://www.gulpjs.com.cn/

1. 首先新建项目文件夹后，项目目录下创建 package.json 文件。

npm init

2. 安装 gulp 命令行工具

npm install --global gulp-cli

3. 安装 gulp，作为开发时依赖项

npm install --save-dev gulp

4. 新建gulpfile.js文件，简单方法表示如下：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

5. 在项目根目录下执行 gulp 命令

gulp

6. 现对gulpfile.js进行详细配置

gulp插件

我们要处理文件的合并、压缩等操作，接口中没有提供，都放在了插件中。

插件下载：

npm install 插件名 --save-dev

gulp-concat : 合并文件(js/css)

gulp-uglify : 压缩js文件

gulp-rename : 文件重命名

gulp-less : 编译less

gulp-sass：编译sass

gulp-clean-css : 压缩css

gulp-livereload : 实时自动编译刷新

gulp-htmlmin：压缩html文件

gulp-connect：热加载，配置一个服务器

gulp-load-plugins：打包插件（里面包含了其他所有插件）

未完全补全插件的信息，可根据下方代码文件看插件名称来下载，或者学习官网插件api。

代码文件见如下：
首先对需要引用的文件写完整

var gulp = require('gulp'),
    mincss = require('gulp-mini-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    plumber = require('gulp-plumber'),
    Replace = require('gulp-replace'),
    processhtml = require('gulp-processhtml'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    imageminJpegtran = require('imagemin-jpegtran'),
    imageminGifsicle = require('imagemin-gifsicle'),
    imageminOptipng = require('imagemin-optipng'),
    imageminSvgo = require('imagemin-svgo'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    cache = require('gulp-cache'),
    gutil = require('gulp-util'),
    babel = require("gulp-babel");

其次命名标示清楚需要打包压缩的源文件，即src_xx命名信息，以及目的文件，命名未dest_xx信息。

var src_css = './src/css',
    dest_css = './dest/css',
    src_html = './src',
    dest_html = './dest',
    src_img = './src/img',
    dest_img = './dest/img',
    src_js = './srcA/js',
    dest_js = './dest/js',

针对打包异常可采用控制台发声

var date = new Date().getTime();
function errrHandler( e ){
    // 控制台发声,错误时beep一下
    gutil.beep();
    gutil.log(e);
    this.emit('end');
}

最重要的就是建立gulp执行打包的方法，这里是分别对image/html/js/css等进行处理打包，function方法中需要添加好src_xx的路径信息，具体实现为固定写法，想了解深层次含义可以学习官网api。以下建立的task任务，命名分别为 ‘imagemin’ / ‘htmlmin’ / ‘minjs’ / ‘mincss’。

gulp.task('imagemin', function () {
    gulp.src(src_img + '/**/*.{png,jpg,gif,ico}')
        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(imagemin({
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant(), imageminJpegtran({progressive: true})
                , imageminGifsicle({interlaced: true}),
                imageminOptipng({optimizationLevel: 3}), imageminSvgo()]
            //使用pngquant深度压缩png图片的imagemin插件
        }))
        .pipe(gulp.dest(dest_img));
});

gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };

    gulp.src([src_html+'/**/*.html','!./srcA/{service,hardware}.html'])

        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(Replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(dest_html));

});
gulp.task('mincss', function () {
    gulp.src(src_css+'/**/*.css')
        .pipe(mincss())
        .pipe(gulp.dest(dest_css));
});
gulp.task('minjs', () => {
    return gulp.src(src_js+'/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dest_js));
});

打包的任务列举清楚后，下一步就是一次性执行任务了，也可针对上面的压缩单独操作。一般情况下可通过建立一个通用task 依次跑通所有的打包压缩任务，即使用gulp.run方法执行。

gulp.task('default',['clean'],function(){
    gulp.run('minjs','mincss','htmlmin','imagemin');
    // gulp.run('watch');
});

这里有注释了一个watch方法，即为监听，当我执行打包压缩后，我修改了开发工具中的代码，该watch方法可自动为项目进行打包压缩，十分便捷。

gulp.task('watch', function () {
    gulp.watch(src_css+'/**/*.css',['mincss']);
    gulp.watch(src_js+'/**/*.js',['minjs']);
    gulp.watch(src_html+'/*.html',['htmlmin']);
    gulp.watch(src_img+'/**/*.{png,jpg,gif,ico}',['imagemin']);
});

这里也写了一个缓存清除的task，可跟随默认打包一起执行使用。

gulp.task('clean', function (done) {//清除缓存
    return cache.clearAll(done);
});

gulpfiles.js文件 即为上述代码段连接而成，有需要可私信邮箱发送给你

gulp常用命令

执行压缩： gulp default / gulp
编译页面： gulp htmlmin
编译脚本： gulp minjs
编译样式： gulp mincss
压缩图片： gulp imagemin
//语法检测： gulp eslint