使用gulp打包发布代码

阳光穿透心脏的1/2处 2023-02-23 05:25 22阅读 0赞

*  在发布代码之前，可以对代码进行优化：

1.  压缩
2.  合并
3.  增加版本号等等…

这样的话，在线上的文件就会比较小，提高用户的下载速度，为用户节省带宽。压缩后的代码也不容易被其他人一眼看出来是什么作用，这样也能起到一些保护知识产权的作用。

一般来说，现在常用主流的3个工具：

1.  **Grunt**
2.  **Gulp**
3.  **Webpack**

Grunt

自动化构建工具

Gulp

Webpack

静态资源打包工具

这里我们用 gulp写一个简单的页面代码的打包发布流程：

> 首先我们需要安装gulp与对应所需的插件

npm install --global gulp-cli
    
    npm install --save-dev gulp
    
    npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

安装完毕后，我们在项目的根目录下创建一个文件`gulpfile.js`（gulp的所有任务需要定义在这个文件中），创建一个名为`dist`的文件夹（用于接收打包完成后的代码）。

这里附上gulpfile.js的一个简单处理流程：

// 首先，申明依赖的加载项
    var gulp = require("gulp");
    var rev = require("gulp-rev"); // 插件：给每个文件添加版本号 通过计算所得的HASH码修改文件名
    var revReplace = require("gulp-rev-replace");
    var useref = require("gulp-useref"); // 插件作用：自动合并,自动打包代码
    var filter = require("gulp-filter"); // 过滤代码：在代码运行过程中将某些代码过滤出来 
    var uglify = require("gulp-uglify"); // 压缩JS代码的插件
    var csso = require("gulp-csso"); // 压缩CSS代码的插件
    
    gulp.task("default", function () { 
        var jsFilter = filter("**/*.js", {  restore: true }); // 获取到所有js文件
        var cssFilter = filter("**/*.css", {  restore: true }); // 获取到所有css文件
        var indexHtmlFilter = filter(["**/*", "!**/index.html"], {  restore: true }); // 获取到所有除了index.html(入口文件)之外的所有文件
    
        return gulp
            .src("src/index.html") // src -- 拿到需要处理的文件-index
            .pipe(useref()) // 第一步处理：分析并拿到<build>注释标识中的每一个文件 Concatenate with gulp-useref
            .pipe(jsFilter) // 第二步处理：从流中，筛选出所有js文件
            .pipe(uglify()) // 第三步：压缩筛选出的JS文件 Minify any javascript sources
            .pipe(jsFilter.restore) // 第四步：将压缩好的JS文件放回归到流中
            .pipe(cssFilter) // 第五步：从流中，筛选出所有css文件
            .pipe(csso()) // 第六步：压缩筛选出的css文件 Minify any CSS sources
            .pipe(cssFilter.restore) // 第六步：将压缩好的css文件放回归到流中
            .pipe(indexHtmlFilter) // 第七步：筛选出 除了index.html(入口文件)之外的其他所有文件
            .pipe(rev()) // 第八步：为文件生成 HASH版本号和文件名 Rename the concatenated files (but not index.html)
            .pipe(indexHtmlFilter.restore) // 第九步：将第八步 -- 生成完成之后的所有文件回归到流中
            .pipe(revReplace()) // 第十步：把index.html中，对于文件的引用，替换新文件名 Substitute in new filenames
            .pipe(gulp.dest("dist")); // 流的最后，将流中处理完成之后的代码放入dist文件夹中。作为发布版本。
    });

当然，`gulp`各种各样的插件还能实现很多眼花缭乱的功能。一般来说，一旦我们写好`gulp`的任务，在一个项目的生命周期中很少会去改变，属于一个一劳永逸的事情。所以很有必要花点时间抒写一个完美适用的`gulpfile.js`文件。这里的`gulpfile.js`可以作为一个种子，大家可以根据在这个文件的基础之上，自己去编写自己适用的`gulpfile`文件。