前端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文件中的对应资源路径

看起来就几个步骤，作起来仍是挺麻烦的：

 

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

npm init -y

二、在根目录建立一个gulpfile.js文件

三、安装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中资源的引用路径

四、在开始编写任务以前，先新建一个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'
    }
};

五、编写gulp任务

 // 一、统一将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))
})
// 二、删除掉上一步操做生成的css、js合并文件(由于在后面的添加版本号过程当中也会生成，避免重复)
gulp.task('del',function () {
    return gulp.src([path.output.css,path.output.js])
        .pipe(clean());
});
// 二、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))
});
// 三、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))
});
// 四、图片压缩并加版本号
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))
});
// 五、给文件添加版本号，针对于已经替换引用路径的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'));
});

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

// 七、移除rev目录和dist构建目录
gulp.task('clean', function() {
    return gulp.src(['./dist','./rev'])
        .pipe(clean());
});
// 八、监控文件的改变，页面动态刷新
/*gulp.task('serve', function() {
    browserSync.init({
        port: 3000,
        server: {
            baseDir: ['./src/'],  // 启动服务的目录 默认 index.html
            index: 'index.html'   // 自定义启动文件名
        }
    });
});*/
// 九、监控文件变化，自动从新构建
/*gulp.task('watch',function () {
    gulp.watch('./src/!**!/!*', ['clean','html','del','css','js','img','rev','copy']);
})*/
// 九、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文档

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