Detailed explanation of simple gulp packaging in nodejs

本文我们主要和大家分享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 = './xxxx/'; // 你的源文件目录
var dist_file= './dist/xxxx/'; // 文件处理后你想存放的目录
var config= {
src: src_file,
dist: dist_file,
js: {
  src: src_file + 'src/js/**/*.js',      // 你的js目录
  dist: dist_file + 'src/js',         // js文件打包后存放的目录
  },
};
module.exports = config;

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

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

gulpfile.xxx.js：

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

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

下面是gulpfile.js文件：

var haha= require('./gulpfile.prod.js');
haha();

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

.babelrc内容：

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

有的小伙伴可能会遇到版本号不断叠加的问题，还记得{ 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}$`), '') + ext);改为return modifyFilename(pth, (filename, ext) => filename + ext);

gulp-rev-collector里的index.js：

大概128行左右

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

这段改为

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

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

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

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

相关推荐：

vue项目的构建，打包，发布详解

webpack的安装与基本打包用法和命令参数详解

gulp实用配置的介绍与使用

The above is the detailed content of Detailed explanation of simple gulp packaging in nodejs. For more information, please follow other related articles on the PHP Chinese website!