欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年12月21日 08:47:25   作者:等鹿的小喵喵  
因?yàn)橹耙恢庇腥私o我推薦gulp,說(shuō)他這里好哪里好的。實(shí)際上對(duì)我來(lái)說(shuō)夠用就行。grunt熟悉以后實(shí)際上他的配置也不難,說(shuō)到效率的話(huà)確實(shí)是個(gè)問(wèn)題,尤其項(xiàng)目大了以后,目前位置遇到的項(xiàng)目都還可以忍受。不過(guò)不管怎么說(shuō),需要親自用過(guò)gulp之后才能品評(píng)他和grunt之間的優(yōu)劣。

最近換了家新公司,由于是創(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模塊用法示例【創(chuàng)建web服務(wù)器/客戶(hù)端】

    這篇文章主要介紹了NodeJS http模塊用法,結(jié)合實(shí)例形式分析了node.js創(chuàng)建web服務(wù)器與客戶(hù)端,進(jìn)行HTTP通信的相關(guān)操作技巧,需要的朋友可以參考下
    2019-11-11
  • node的process以及child_process模塊學(xué)習(xí)筆記

    node的process以及child_process模塊學(xué)習(xí)筆記

    這篇文章主要介紹了node的process以及child_process模塊學(xué)習(xí)筆記,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • node使用promise替代回調(diào)函數(shù)

    node使用promise替代回調(diào)函數(shù)

    這篇文章主要介紹了node使用promise替代回調(diào)函數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • Node.js log4js日志管理詳解

    Node.js log4js日志管理詳解

    日志對(duì)任何的應(yīng)用來(lái)說(shuō)都是至關(guān)重要的,下面這篇文章主要給大家介紹了關(guān)于Node.js log4js日志管理的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07
  • Windows安裝Node.js報(bào)錯(cuò):2503、2502的解決方法

    Windows安裝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-10
  • Node.js 異步編程之 Callback介紹(一)

    Node.js 異步編程之 Callback介紹(一)

    這篇文章主要介紹了Node.js 異步編程之 Callback介紹(一),本文用實(shí)例講解Callback的相關(guān)知識(shí),本文是第一篇,下一篇小編會(huì)跟進(jìn),需要的朋友可以參考下
    2015-03-03
  • Nodejs高擴(kuò)展性的模板引擎 functmpl簡(jiǎn)介

    Nodejs高擴(kuò)展性的模板引擎 functmpl簡(jiǎn)介

    本文給大家分享的是一款nodejs高擴(kuò)展性的模板引擎functmpl的簡(jiǎn)單介紹以及用法詳解,有需要的小伙伴可以參考下
    2017-02-02
  • Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程

    Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程

    這篇文章主要介紹了Node.js+Express+Vue+MySQL+axios的項(xiàng)目搭建全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • nodejs中簡(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)Javascript Promise機(jī)制的實(shí)例,本文在nodejs中簡(jiǎn)單實(shí)現(xiàn)一個(gè)promise/A 規(guī)范,需要的朋友可以參考下
    2014-12-12
  • package.json各個(gè)屬性說(shuō)明詳解

    package.json各個(gè)屬性說(shuō)明詳解

    這篇文章主要介紹了package.json各個(gè)屬性說(shuō)明詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03

最新評(píng)論