前端自动化构建配置清单

Posted 2020-10-15 前端无止境

　　为了节省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文档

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