nodejs怎么實現(xiàn)gulp打包功能

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:55:03

nodejs怎么實現(xiàn)gulp打包功能

nodejs怎么實現(xiàn)gulp打包功能:這次給大家?guī)韓odejs怎么實現(xiàn)gulp打包功能，nodejs實現(xiàn)gulp打包功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。最近換了家新公司，由于是創(chuàng)業(yè)公司，項目基本從零開始搭建。工作幾年，也沒想過寫點什么技術(shù)性的東西，今天突然心血來潮，哦當(dāng)然，我這

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀nodejs怎么實現(xiàn)gulp打包功能:這次給大家?guī)韓odejs怎么實現(xiàn)gulp打包功能，nodejs實現(xiàn)gulp打包功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。最近換了家新公司，由于是創(chuàng)業(yè)公司，項目基本從零開始搭建。工作幾年，也沒想過寫點什么技術(shù)性的東西，今天突然心血來潮，哦當(dāng)然，我這

這次給大家?guī)韓odejs怎么實現(xiàn)gulp打包功能，nodejs實現(xiàn)gulp打包功能的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

最近換了家新公司，由于是創(chuàng)業(yè)公司，項目基本從零開始搭建。工作幾年，也沒想過寫點什么技術(shù)性的東西，今天突然心血來潮，哦當(dāng)然，我這個人總是特別容易心血來潮，不定想干點啥，不說廢話了，畢竟上班呢，開小差也不太好。忙了一個月，項目初見雛形，也基本可以1.0上線了，趁著等文案的時間，簡單寫點gulp打包的東西，等明兒有空再來一篇詳細(xì)的，再有空再來個webpack的，哎呀，這個有空也不知道是啥時候，莫怪，好像又廢話了幾句。stop，stop。

從頭兒來吧，首先創(chuàng)建一個package.json文件，就npm init一直確認(rèn)確認(rèn)確認(rèn)就好了，構(gòu)建過程中用到什么就npm什么就好了。做過vue腳手架的小伙伴兒應(yīng)該知道，腳手架會自動生成一個特別全面的package.json文件，當(dāng)然我們目前也用不到那么多。不多說了。

為了萬一以后添加強大的功能，我們就多做幾個文件，就不是僅僅一個gulpfile.js了，當(dāng)然一個也沒問題。

來創(chuàng)建一個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，還有一些靜態(tài)文件等。

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

天啊，我本來想一步步來寫清楚點的，沒想到一下子把版本號相關(guān)的也都寫進(jìn)去了，那就算了吧，一起來吧。

下面是gulpfile.js文件：

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

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

.babelrc內(nèi)容：

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

有的小伙伴可能會遇到版本號不斷疊加的問題，還記得{ 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})*" );

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

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

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！