gulp 自动化构建网站（版本号静态资源）

前言

 新的一年啦，感觉总是静不下心，用了一天的时间吧，算是对gulp 这个前端打包工具入门了，自己也写了demo，表示对这个稍微理解了吧，

当然还是有差距的啦，下面讲讲怎么用吧：

如何用

 当然先去官网去看下如何使用的，这个是入门指南 https://www.gulpjs.com.cn/docs/getting-started/

1. 全局安装

$ npm install --global gulp 

2你的項目裏 執行

npm init

 全部回車 ，需要的地方在改下就好啦，這個沒有那么多要求，随意一点

3. 项目安装 gulp

npm install --save-dev gulp

 会自动产生 node_modules 这个目录 里面都是配置

4.  在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

然后这个是我的目录

 这个 dist 就是你的gulp 打包的文件

gulpfile.js 这个文件就是写 一些脚本代码

 这个是我用到一些 gulp 的插件库，能帮你很多呢，上面也有注释

然后就是 怎么压缩图片 压缩css, 压缩js 和合并，静态资源版本号（这个需要详情写点），

上代码吧，上面都有注释，不懂的可以先看 gulp中文官网 会好理解点吧

gulp.task('default', function (done) {
    browserSync.init({
        server: {
            baseDir: ["./dist"] // 服务器启动要打开的文件位置
        }
    });
    //gulp.watch("src/scss/**/*.scss",['sass']);
    gulp.watch("src/js/**/*.js", function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    gulp.watch("src/**/*.html", function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    gulp.watch("src/images/**/*.", function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    gulp.watch("dist/**/*.html").on("change", browserSync.reload);

    // condition = false;
    // runSequence( //需要说明的是，用gulp.run也可以实现以上所有任务的执行，，故使用了runSequence.
    //     //['assetRev'],
    //     ['css'],
    //     ['js'],
    //     ['html'],
    //     done);
});

// 压缩css 文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('css', function () {
    gulp.src('src/css/*.css')
        //.pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）
        .pipe(cssmin({
            advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7', //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        // .pipe(rename(function(path){     //执行csso的压缩优化，然后重命名为*.min.css
        //     path.basename +=".min";
        //     path.extname = ".css"
        // }))
        .pipe(assetRev()) //该任务调用的模块 css中引入的图片/字体等添加hash编码
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))  //控制的css输出到dist文件夹里
        .pipe(rev.manifest())  //对应的版本号用json表示出来，
        .pipe(gulp.dest('dist/rev/css'));
});

// 压缩js 文件
gulp.task('js', function () {
    return gulp.src('src/js/**/*.js')
        .pipe(plumber())
        .pipe(minify())
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest("dist/rev/js"))
        .pipe(browserSync.stream());
});

//处理 html 文件 

gulp.task('html', function () {
    return gulp.src(['dist/rev/**/*.json', "src/*.html"]) //编辑路径下的html 文件
        .pipe(plumber())
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(gulp.dest("dist/")) //编辑好的文件
        .pipe(browserSync.stream());
});

// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
    // 1. 找到图片
    gulp.src('src/images/*.*')
        .pipe(imagemin({progressive: true })) // 2. 压缩图片
        .pipe(rev())
        .pipe(gulp.dest('dist/images')) // 3. 另存图片
        .pipe(rev.manifest('rev-img-manifest.json'))//生成一个rev-manifest.json
        .pipe(gulp.dest('dist/rev/images'));//将 rev-manifest.json 保存到 rev 目录内
});

// css 文件内的css 替换
gulp.task('revimg', function() {
    //css，主要是针对img替换
    gulp.src(['dist/rev/images/**/rev-img-manifest.json', +'dist/css/*.css'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(gulp.dest('dist/css'));
});

// Clean 任务执行前，先清除之前生成的文件
gulp.task('clean', function (cb) {
    del(['dist/css', 'dist/js', 'dist/images','dist/rev','dist/*.html'], cb)
});

//  打包发布publish 
gulp.task('publish', function () {
    return gulp.src('dist/**/*')
        .pipe(plumber())
        .pipe(zip('publish.zip'))
        .pipe(gulp.dest('release'))
});

主要讲 gulp静态资源版本

用到这几个吧

npm install gulp-rename --save-dev (文件重命名)
npm install gulp-asset-rev --save-dev (版本号 处理css图片路径哈希值的)
npm install gulp-rev-collector --save-dev （gulp-rev的插件，HTML模板更改引用路径）
npm install --save-dev run-sequence
npm install gulp-rev --save-dev  (更改版本名) 

代码也都在上面了，当然后还要改成想要的形式就是 楼主这样的

<link rel="stylesheet" type="text/css" href="../../styles/common.css?v=a8aacfb">
<script type="text/javascript" src="../../scripts/app_common.js?v=51921f3"></script>
background:url(../images/none.png?v=8f204d4)

需要改动几处地方：

 1.node_modules --> gulp-rev -->index.js  

    //manifest[originalFile] = revisionedFile;
    manifest[originalFile] = originalFile + '?v=' + file.revHash;

2.node_modules --> gulp-rev-collector -->index.js   我是4.0的版本所以会有些不同但大小异同

 changes.push({
               //regexp: new RegExp( prefixDelim + pattern, 'g' ),
               regexp: new RegExp( prefixDelim + pattern+'(\?v=\w{10})?', 'g' ),
               patternLength: pattern.length,
               replacement: '$1' + manifest[key]
             });

3.node_modules --> gulp-asset-rev -->index.js

//var verStr = (options.verConnecter || "-") + md5;
                        
//src = src.replace(verStr, '').replace(/(.[^.]+)$/, verStr + "$1");

var verStr = (options.verConnecter || "") + md5;

src = src+"?v="+verStr;

4.node_modules --> rev-path -->index.js

//return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);

 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

然后就好啦， 主要把绿色的改成 下面的 黑色的就OK啦，

最后执行 顺序呢：

gulp clean
gulp css
gulp js
gulp images
gulp revimg
gulp html

这样你的dist 就有你想要的文件啦 和静态版本号啦，是不是很方便啦

希望有帮助吧 ，哈哈  我们一起进阶 ，2019