nodejs怎么實(shí)現(xiàn)簡(jiǎn)單的gulp打包

小編給大家分享一下nodejs怎么實(shí)現(xiàn)簡(jiǎn)單的gulp打包，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

做個(gè)最簡(jiǎn)單例子，以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;

這只是個(gè)最簡(jiǎn)單的小例子，要是有其它的往里加就好了，html，css，img，還有一些靜態(tài)文件等。

關(guān)鍵的來(lái)了，我們把處理方法寫(xiě)在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');//版本號(hào)管理的一些東西，先寫(xiě)進(jìn)來(lái)吧，懶的在敲了
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;

天啊，我本來(lái)想一步步來(lái)寫(xiě)清楚點(diǎn)的，沒(méi)想到一下子把版本號(hào)相關(guān)的也都寫(xiě)進(jìn)去了，那就算了吧，一起來(lái)吧。

下面是gulpfile.js文件：

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

基本工作已經(jīng)完成一大半了，還有一個(gè)忘記說(shuō)了。如果你用到了es6語(yǔ)法，千萬(wàn)別忘記配置一個(gè).babelrc文件.

.babelrc內(nèi)容：

  "presets": [
    "es2015",
  ],
  "plugins": [
    "transform-remove-strict-mode"//這個(gè)插件就是添加版本號(hào)的關(guān)鍵。
  ]
}

有的小伙伴可能會(huì)遇到版本號(hào)不斷疊加的問(wèn)題，還記得{ replaceReved:true }這個(gè)嗎，前面有看一下，記得添加這個(gè)。還有最后一步node_modules我們要更改一些代碼，來(lái)吧，我下的最新的包（如果你用的老的，也是差不多的改法），替換下。

gulp-path里的index.js兩個(gè)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})*" );

這里相關(guān)的也是網(wǎng)上查了很多相關(guān)的資料，不過(guò)好像都是一些老版本，并且gulp-rev里的文件不用修改，這里也經(jīng)過(guò)多次測(cè)試，以上基本可用。

好了，離成功不遠(yuǎn)了，cmd運(yùn)行下gulp命令，ok，基本完成，可以去查看下啦！

注意：所有require的東西記得npm安裝哦，卡的話就cnpm，不多說(shuō)。

還有由于很多東西都是手打的，可能會(huì)有部分拼寫(xiě)呀，文件路徑的錯(cuò)誤，記得檢查更改哦。

以上是“nodejs怎么實(shí)現(xiàn)簡(jiǎn)單的gulp打包”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！