码迷,mamicode.com
首页 > 其他好文 > 详细

gulp使用简要记录

时间:2021-05-24 05:38:30      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:node   select   one   als   reg   key   ctf   package   ejs   

 

 

1.首先安装nodejs (版本号是12版本以上)
2.安装gulp: (安装gulp 4.0以上)
    npm install gulp 
3.npm install:在项目中生成node_models文件夹
4.npm init:生成package.json文件
5.安装gulp插件:

 

    npm install --save-dev gulp-rev

 

    npm install --save-dev gulp-rev-collector

 

    npm install --save-dev gulp-asset-rev
6.下一步配置gulpfile.js(在根目录下增加一个js文件)

 

  var gulp = require(‘gulp‘),
    rev = require(‘gulp-rev‘),
    revCollector = require(‘gulp-asset-rev‘);
  //开启一个任务
  gulp.task(‘a‘, function(){
    //检测gulp是否启动
    console.log("gulp启动了");
  })

 

  var cssSrc = ‘*.css‘,
      jsSrc = ‘*.js‘;
  //CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task(‘revCss‘, function(){
    return gulp.src(cssSrc)
        .pipe(rev()) //文件名加MD5后缀
        .pipe(gulp.dest(‘dist‘)) //输出到css目录
        .pipe(rev.manifest(‘rev-css-manifest.json‘)) //生成一个rev-manifest.json
        .pipe(gulp.dest(‘dist/rev‘)); //将 rev-manifest.json 保存到 rev 目录内
  });
  // //js生成文件hash编码并生成 rev-manifest.json文件名对照映射
  gulp.task(‘revJs‘, function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(gulp.dest(‘dist‘))//输出到css目录
        .pipe(rev.manifest(‘rev-js-manifest.json‘))
        .pipe(gulp.dest(‘dist/rev‘));
  });
  //Html替换css、js文件版本
  gulp.task(‘revHtml‘, function () {
      
    return gulp.src([‘dist/rev/*.json‘, ‘*.html‘])
        .pipe(revCollector({
            replaceReved: true, // 设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false
        }))
        .pipe(gulp.dest(‘dist‘));
  });
  //开发构建,默认任务
  gulp.task(‘default‘,gulp.series(gulp.parallel(‘revCss‘,‘revJs‘,‘revHtml‘)));

 

  运行gulp命令

 

注意事项:
1、源文件引用js和css时,不能加?v=,否则不会自动生成hash版本号

 

2、上面的var revCollector = require(‘gulp-asset-rev’); //给js css加版本号
gulp-asset-rev’模块就是用来给代码加版本号的
pipe方法里面调用 revCollector()此方法
版本号加好了但是是index-2345ejhd.js这种格式的不是我们想要的
我们希望是…/plugins/select/css/selectFilter.css?v=b2f872f 这种格式

 

运行gulp命令之前要是改node_models配置模块(行数不一定对得上仅做参考。)

 

①:gulp-rev(文件夹)下面的index.js:

 

    (135行)manifest[originalFile] = revisionedFile;

 

    改成:manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;

 

  ②:gulp-rev-collector(文件夹)下面的index.js:

 

    (40行)var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ‘‘ );

 

    改成:var cleanReplacement =  path.basename(json[key]).split(‘?‘)[0];    
  
    (175行)regexp: new RegExp( prefixDelim + pattern, ‘g‘ ),

 

    改成:regexp: new RegExp( prefixDelim + pattern+‘(\\?v=\\w{10})?‘, ‘g‘ ),

 

  ③:rev-path(文件夹)下面的index.js:

 

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

 

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

 

  ④:gulp-asset-rev(文件夹)下面的index.js:

 

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

 

    改成:verStr = (options.verConnecter || "") + md5;

 

    (80行)src = src.replace(verStr, ‘‘).replace(/(\.[^\.]+)$/, verStr + "$1");

 

    改成:src=src+"?v="+verStr;

 

 

 

gulp使用简要记录

标签:node   select   one   als   reg   key   ctf   package   ejs   

原文地址:https://www.cnblogs.com/yuyouyi/p/14756031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!