Detailed explanation of simple gulp packaging in nodejs-JS Tutorial-php.cn

Detailed explanation of simple gulp packaging in nodejs

小云云

Release： 2017-12-21 15:07:46

Original

2136 people have browsed it

本文我们主要和大家分享nodejs实现简单的gulp打包，首先创建一个package.json文件，就npm init一直确认确认确认就好了，构建过程中用到什么就npm什么就好了。做过vue脚手架的小伙伴儿应该知道，脚手架会自动生成一个特别全面的package.json文件，当然我们目前也用不到那么多。为了万一以后添加强大的功能，我们就多做几个文件，就不是仅仅一个gulpfile.js了，当然一个也没问题。

来创建一个gulpfile.config.js来专门放置文件路径引用输出等。就是所谓的src，dist。再来一个gulpfile.xxx.js，名字随便起吧，引用的时候引用对就好了。再来一个gulpfile.js吧，最后要运行啊。

做个最简单例子，以js压缩为例，稍后加上版本哈管理功能，用法都差不多，用什么加什么。

var src_file = &#39;./xxxx/&#39;; // 你的源文件目录
var dist_file= &#39;./dist/xxxx/&#39;; // 文件处理后你想存放的目录
var config= {
src: src_file,
dist: dist_file,
js: {
  src: src_file + &#39;src/js/**/*.js&#39;,      // 你的js目录
  dist: dist_file + &#39;src/js&#39;,         // js文件打包后存放的目录
  },
};
module.exports = config;

Copy after login

这只是个最简单的小例子，要是有其它的往里加就好了，html，css，img，还有一些静态文件等。

关键的来了，我们把处理方法写在gulpfile.xxx.js里面。

gulpfile.xxx.js：

var gulp = require(&#39;gulp&#39;);
var rename = require(&#39;gulp-rename&#39;); //重命名
var babel = require("gulp-babel");
var uglify = require(&#39;gulp-uglify&#39;); //js压缩
var config = require(&#39;./gulpfile.config.js&#39;);
var runSequence = require(&#39;run-sequence&#39;);
var rev = require(&#39;gulp-rev&#39;);//版本号管理的一些东西，先写进来吧，懒的在敲了
var revCollector = require(&#39;gulp-rev-collector&#39;);
var cssUrl = &#39;./dist/xxx/src/css/*.css&#39;,
   jsUrl = &#39;./dist/xxx/src/js/*.js&#39;;
function haha() {
  gulp.task(&#39;js&#39;, function () {
    return gulp.src(Config.js.src)
          .pipe(babel())
          .pipe(uglify())
          .pipe(gulp.dest(config.js.dist));
    });
  gulp.task(&#39;revJs&#39;, function(){
    return gulp.src(jsUrl)
          .pipe(rev())
          .pipe(rev.manifest())
          .pipe(gulp.dest(&#39;dist/xxx/src/js&#39;));
  });
  gulp.task(&#39;revHtml&#39;, function () {
        return gulp.src([&#39;dist/xxx/src/js/**/*.json&#39;, &#39;chaohuo/*.html&#39;]) /*后面本地html文件的路径，可自行配置*/
          .pipe(revCollector(
            { replaceReved:true }
            ))
          .pipe(gulp.dest(&#39;dist/chaohuo&#39;)); /*Html更换css、js文件版本,和本地html文件的路径一致*/
  });
  gulp.task(&#39;dev&#39;, function (done) {
      condition = false;
      runSequence(
          [&#39;revJs&#39;],
          [&#39;revHtml&#39;],
    done);});
    gulp.task(&#39;default&#39;, [&#39;js&#39;,&#39;dev&#39;]);
}
module.exports = haha;

Copy after login

天啊，我本来想一步步来写清楚点的，没想到一下子把版本号相关的也都写进去了，那就算了吧，一起来吧。

下面是gulpfile.js文件：

var haha= require(&#39;./gulpfile.prod.js&#39;);
haha();

Copy after login

基本工作已经完成一大半了，还有一个忘记说了。如果你用到了es6语法，千万别忘记配置一个.babelrc文件.

.babelrc内容：

  "presets": [
    "es2015",
  ],
  "plugins": [
    "transform-remove-strict-mode"//这个插件就是添加版本号的关键。
  ]
}

Copy after login

有的小伙伴可能会遇到版本号不断叠加的问题，还记得{ replaceReved:true }这个吗，前面有看一下，记得添加这个。还有最后一步node_modules我们要更改一些代码，来吧，我下的最新的包（如果你用的老的，也是差不多的改法），替换下。

gulp-path里的index.js两个return的东西都改掉：

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

return modifyFilename(pth, (filename, ext) => filename.replace(new RegExp(`-${hash}$`), &#39;&#39;) + ext);改为return modifyFilename(pth, (filename, ext) => filename + ext);

Copy after login

gulp-rev-collector里的index.js：

大概128行左右

patterns.push( escPathPattern( (path.dirname(key) === &#39;.&#39; ? &#39;&#39; : closeDirBySep(path.dirname(key)) ) )
+ path.basename(key, path.extname(key))
.split(&#39;.&#39;)
.map(function(part){
return escPathPattern(part) + &#39;(&#39; + opts.revSuffix + &#39;)?&#39;;
})
.join(&#39;\\.&#39;)
+ patternExt
);

Copy after login

这段改为

patterns.push( escPathPattern( (path.dirname(key) === &#39;.&#39; ? &#39;&#39; : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) ) + opts.revSuffix + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*" );

Copy after login

这里相关的也是网上查了很多相关的资料，不过好像都是一些老版本，并且gulp-rev里的文件不用修改，这里也经过多次测试，以上基本可用。

好了，离成功不远了，cmd运行下gulp命令，ok，基本完成，可以去查看下啦！

注意：所有require的东西记得npm安装哦，卡的话就cnpm，不多说。