前端gulp自动化构建配置

　　为了节省http请求次数、节约带宽，加速页面渲染速度，达到更好用户体验的目的。现在普遍的做法是在上线之前做静态资源的打包构建，也就是静态资源的合并压缩；

　　这里使用的是gulp，当然现在有更强大的模块化构建工具webpack，大家可以尝试一下，但是不管用什么工具，只要能解决对应的问题，就是好工具；

　　大家注意，使用gulp需要先安装node哦，具体安装教程请百度一下

完整的配置和demo在github上：https://github.com/hj1226104386/gulp-workflow.git，欢迎大家star一下啦

资源构建无非就是下面几个步骤：

1. css、js、image的合并压缩
2. 给css、js、image合并后添加版本号（hash），生成对应的manifest文件，这一步非常重要
3. 根据manifest文件来替换HTML文件和css文件中的对应资源路径

看起来就几个步骤，做起来还是挺麻烦的：

1、首先先在根目录打开命令行做项目依赖初始化：

npm init -y

2、在根目录创建一个gulpfile.js文件

3、安装gulp的依赖，通过npm来安装，如下，并在gulpfile中引入（commonjs规范，使用require来引入模块）

var gulp = require('gulp');
var rev = require('gulp-rev'); // 创建版本号（hash）值
var revCollector = require('gulp-rev-collector'); // 将版本号添加到文件后
var sequence = require('run-sequence'); // 让gulp任务同步运行
var clean = require('gulp-clean'); // 清除dist构建目录
var htmlmin = require('gulp-htmlmin'); // 压缩html
var cssnano = require('gulp-cssnano'); // css压缩
var autoprefixer = require('gulp-autoprefixer'); // 自动处理css兼容后缀
var babel = require('gulp-babel'); // es6转es5
var concat = require('gulp-concat'); // 文件合并
var uglify = require('gulp-uglify'); // js混淆
var imagemin = require('gulp-imagemin'); // 图片压缩
var browserSync = require('browser-sync').create(); // 启动本地服务，修改免F5刷新
var useref = require('gulp-useref'); // 替换HTML中资源的引用路径

4、在开始编写任务之前，先新建一个path对象，用来统一配置和保存静态资源路径

// 路径配置
var path = {
    // 静态资源输入路径
    input: { 
        html: ['./src/*.html'],
        css: ['./src/css/*.css'],
        js: ['./src/js/*.js'],
        images: ['./src/images/*'],
        lib: ['./src/lib/**/*']
    },
    // 静态资源输出路径
    output: {
        html: './dist',
        css: './dist/css',
        js: './dist/js',
        images: './dist/images',
        lib: './dist/lib',
    },
    // manifest文件保存路径
    rev:{
        baseRev:'./rev',
        css:'./rev/css',
        js:'./rev/js',
        images:'./rev/images'
    }
};

5、编写gulp任务

 // 1、统一将html中的资源替换成压缩合并后的文件名并将HTML特定标签中的文件合并
gulp.task('html',function () {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    return gulp.src(path.input.html)
        .pipe(useref())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(path.output.html))
})
// 2、删除掉上一步操作生成的css、js合并文件(因为在后面的添加版本号过程中也会生成，避免重复)
gulp.task('del',function () {
    return gulp.src([path.output.css,path.output.js])
        .pipe(clean());
});
// 2、css合并压缩并加版本号
gulp.task('css', function () {
    return gulp.src(path.input.css)
        .pipe(concat('all.min.css'))
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(rev())
        .pipe(gulp.dest(path.output.css))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.css))
});
// 3、js合并压缩并加版本号
gulp.task('js', function () {
    return gulp.src(path.input.js)
        .pipe(concat('all.min.js')) // 合并
        .pipe(babel({               // 转es5
            presets: ['es2015']
        }))
        .pipe(uglify())             // 混淆
        .pipe(rev())
        .pipe(gulp.dest(path.output.js))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.js))
});
// 4、图片压缩并加版本号
gulp.task('img', function () {
    return gulp.src(path.input.images)
        // .pipe(imagemin())           // 压缩图片
        .pipe(rev())
        .pipe(gulp.dest(path.output.images))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.images))
});
// 5、给文件添加版本号，针对于已经替换引用路径的HTML文件，在dist目录下
gulp.task('rev', function () {
    return gulp.src([path.rev.baseRev+'/**/*.json', path.output.html+'/**/*.html', path.output.html+'/**/*.css'])
        .pipe(revCollector({
            replaceReved: true, // 一定要添加，不然只能首次能成功添加hash
            dirReplacements: {
                'css': 'css/',
                'js': 'js/',
                'images': 'images/',
                'lib': 'lib/',
            }
        }))
        .pipe(gulp.dest('dist'));
});

// 6、复制其他库到构建目录(只要保持html和库的相对路径一致，就可以不用替换路径)
gulp.task('copy',function () {
    return gulp.src(path.input.lib)
        .pipe(gulp.dest(path.output.lib))
});

// 7、移除rev目录和dist构建目录
gulp.task('clean', function() {
    return gulp.src(['./dist','./rev'])
        .pipe(clean());
});
// 8、监控文件的改变，页面动态刷新
/*gulp.task('serve', function() {
    browserSync.init({
        port: 3000,
        server: {
            baseDir: ['./src/'],  // 启动服务的目录 默认 index.html
            index: 'index.html'   // 自定义启动文件名
        }
    });
});*/
// 9、监控文件变化，自动重新构建
/*gulp.task('watch',function () {
    gulp.watch('./src/!**!/!*', ['clean','html','del','css','js','img','rev','copy']);
})*/
// 9、build
gulp.task('default',function (callback) {
    // sequence的作用是让所有任务同步执行，gulp默认的是异步执行
    sequence('clean','html','del','css','js','img','rev','copy',function () {
        console.log('构建完成');
    })
})

 好了，以上就是差不多比较全的配置了，gulp的话入门比较简单，一共就5个api，其他的都是一些插件来帮助我们实现强大的功能；

附上gulp的文档：gulp文档

另外还有不懂的小伙伴，欢迎留言哦！