nodejs實(shí)現(xiàn)簡(jiǎn)單的gulp打包
最近換了家新公司,由于是創(chuàng)業(yè)公司,項(xiàng)目基本從零開(kāi)始搭建。工作幾年,也沒(méi)想過(guò)寫(xiě)點(diǎn)什么技術(shù)性的東西,今天突然心血來(lái)潮,哦當(dāng)然,我這個(gè)人總是特別容易心血來(lái)潮,不定想干點(diǎn)啥,不說(shuō)廢話(huà)了,畢竟上班呢,開(kāi)小差也不太好。忙了一個(gè)月,項(xiàng)目初見(jiàn)雛形,也基本可以1.0上線(xiàn)了,趁著等文案的時(shí)間,簡(jiǎn)單寫(xiě)點(diǎn)gulp打包的東西,等明兒有空再來(lái)一篇詳細(xì)的,再有空再來(lái)個(gè)webpack的,哎呀,這個(gè)有空也不知道是啥時(shí)候,莫怪,好像又廢話(huà)了幾句。stop,stop。
從頭兒來(lái)吧,首先創(chuàng)建一個(gè)package.json文件,就npm init一直確認(rèn)確認(rèn)確認(rèn)就好了,構(gòu)建過(guò)程中用到什么就npm什么就好了。做過(guò)vue腳手架的小伙伴兒應(yīng)該知道,腳手架會(huì)自動(dòng)生成一個(gè)特別全面的package.json文件,當(dāng)然我們目前也用不到那么多。不多說(shuō)了。
為了萬(wàn)一以后添加強(qiáng)大的功能,我們就多做幾個(gè)文件,就不是僅僅一個(gè)gulpfile.js了,當(dāng)然一個(gè)也沒(méi)問(wèn)題。
來(lái)創(chuàng)建一個(gè)gulpfile.config.js來(lái)專(zhuān)門(mén)放置文件路徑引用輸出等。就是所謂的src,dist。再來(lái)一個(gè)gulpfile.xxx.js,名字隨便起吧,引用的時(shí)候引用對(duì)就好了。再來(lái)一個(gè)gulpfile.js吧,最后要運(yùn)行啊。
做個(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"http://這個(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安裝哦,卡的話(huà)就cnpm,不多說(shuō)。
還有由于很多東西都是手打的,可能會(huì)有部分拼寫(xiě)呀,文件路徑的錯(cuò)誤,記得檢查更改哦。
本來(lái)想詳細(xì)寫(xiě)一寫(xiě)的,今天就這樣吧,開(kāi)小差到這里結(jié)束,小姐姐也要去搬磚啦。有問(wèn)題可發(fā)我,我有時(shí)間會(huì)回的。有點(diǎn)亂,勿怪。
相關(guān)文章
NodeJS http模塊用法示例【創(chuàng)建web服務(wù)器/客戶(hù)端】
這篇文章主要介紹了NodeJS http模塊用法,結(jié)合實(shí)例形式分析了node.js創(chuàng)建web服務(wù)器與客戶(hù)端,進(jìn)行HTTP通信的相關(guān)操作技巧,需要的朋友可以參考下2019-11-11node的process以及child_process模塊學(xué)習(xí)筆記
這篇文章主要介紹了node的process以及child_process模塊學(xué)習(xí)筆記,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03node使用promise替代回調(diào)函數(shù)
這篇文章主要介紹了node使用promise替代回調(diào)函數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05Windows安裝Node.js報(bào)錯(cuò):2503、2502的解決方法
這篇文章主要給大家介紹了關(guān)于在Windows系統(tǒng)下安裝Node.js報(bào)錯(cuò):2503、2502的解決方法,文中將解決的方法一步步介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10Nodejs高擴(kuò)展性的模板引擎 functmpl簡(jiǎn)介
本文給大家分享的是一款nodejs高擴(kuò)展性的模板引擎functmpl的簡(jiǎn)單介紹以及用法詳解,有需要的小伙伴可以參考下2017-02-02Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程
這篇文章主要介紹了Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12nodejs中簡(jiǎn)單實(shí)現(xiàn)Javascript Promise機(jī)制的實(shí)例
這篇文章主要介紹了nodejs中簡(jiǎn)單實(shí)現(xiàn)Javascript Promise機(jī)制的實(shí)例,本文在nodejs中簡(jiǎn)單實(shí)現(xiàn)一個(gè)promise/A 規(guī)范,需要的朋友可以參考下2014-12-12package.json各個(gè)屬性說(shuō)明詳解
這篇文章主要介紹了package.json各個(gè)屬性說(shuō)明詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03