无码二区视频快速访问,青青草久久一线

前言

本文默認(rèn)你已經(jīng)安裝好node環(huán)境，并且熟悉node命令，和window cd命令。

gulp簡(jiǎn)介

基于nodejs流的自動(dòng)化構(gòu)建工具，可以快速構(gòu)建項(xiàng)目并減少頻繁的I/0操作。你可以利用gulp插件完成各種自動(dòng)化任務(wù)：測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽(tīng)文件在改動(dòng)后重復(fù)指定的這些步驟。官方中文網(wǎng)傳送門。

gulp安裝

NPM是基于命令行的node包管理工具，它可以將node的程序模塊安裝到項(xiàng)目中,
我們利用npm來(lái)安裝gulp.

在命令行輸入：
npm install gulp -g
運(yùn)行時(shí)注意查看命令行有沒(méi)有錯(cuò)誤信息，安裝完成之后，利用命令查看gulp版本號(hào)是否被正確安裝：
gulp --version
或者
gulp -v
安裝到項(xiàng)目本地
先CD到你的項(xiàng)目根目錄
npm install gulp --save-dev
　　--save-dev保存gulp到項(xiàng)目依賴文件package.json的devDependencies里面。
安裝錯(cuò)誤處理
- 連不上服務(wù)器。由于npm大多包在github或者國(guó)外網(wǎng)站上，如果網(wǎng)絡(luò)不好（鐵通/移動(dòng)長(zhǎng)寬等），訪問(wèn)不了，還有可能被墻了（你懂得）。這時(shí)候你可以使用淘寶鏡像：
  npm install gulp -g --registry=https://registry.npm.taobao.org
  你也可以使用淘寶的命令CNPM
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  cnpm install gulp -g
  有些包可能淘寶上也沒(méi)，這時(shí)候你需要翻墻了，請(qǐng)自備梯子。
  淘寶鏡像具體教程：淘寶鏡像傳送門
- 權(quán)限不夠。
  wiondows請(qǐng)使用管理員模式打開(kāi)CMD,linux下命令前面加 sudo,
  sudo npm install gulp -g
- windows下莫名錯(cuò)誤。
  如果網(wǎng)絡(luò)良好，還是安裝出現(xiàn)莫名其妙錯(cuò)誤，那么你就應(yīng)該換Git安裝了。
  window平臺(tái)下建議使用git安裝。

gulp 使用

在你的項(xiàng)目根目錄下創(chuàng)建文件gulpfile.js文件：

var gulp = require('gulp');
gulp.task('default', function() { 
     // 將你的默認(rèn)的任務(wù)代碼放在這
  });

運(yùn)行g(shù)ulp:

 $ gulp

默認(rèn)的名為 default 的任務(wù)（task）將會(huì)被運(yùn)行，在這里由于沒(méi)有任何代碼，所以這個(gè)任務(wù)并未做任何事情。
　　想要單獨(dú)執(zhí)行特定的任務(wù)（task），請(qǐng)輸入 gulp <task> ，上面等價(jià)于：

   $ gulp default

gulp API簡(jiǎn)介

gulp.src（gobs[, options])
輸出符合匹配條件的文件，將返回一個(gè)Vinyl files 的 stream 它可以被 piped 到別的插件中。詳細(xì)查看

       gulp.src('src/js/*.js') //模糊匹配src/js文件夾下所有js文件
          .pipe( concat('app.js'))//
          .pipe(gulp.dest('pub/dist/js'));//合并后文件路徑

gulp.dest(path[, options])
　　能被 pipe 進(jìn)來(lái)，并且將會(huì)寫(xiě)文件。并且重新輸出所有數(shù)據(jù)，因此你可以將它 pipe 到多個(gè)文件夾。如果某文件夾不存在，將會(huì)自動(dòng)創(chuàng)建它。

  gulp.src('./client/templates/*.jade') 
     .pipe(jade()) 
     .pipe(gulp.dest('./build/templates'))
     .pipe(minify()) 
     .pipe(gulp.dest('./build/minified_templates'));

gulp.task(name[, deps], fn)
定義一個(gè)使用 Orchestrator 實(shí)現(xiàn)的任務(wù)（task）。
- name
  任務(wù)的名字，如果你需要在命令行中運(yùn)行你的某些任務(wù)，那么，請(qǐng)不要在名字中使用空格。
- deps
  類型： Array
  一個(gè)包含任務(wù)列表的數(shù)組，這些任務(wù)會(huì)在你當(dāng)前任務(wù)運(yùn)行之前完成。
  注意： 你的任務(wù)是否在這些前置依賴的任務(wù)完成之前運(yùn)行了？請(qǐng)一定要確保你所依賴的任務(wù)列表中的任務(wù)都使用了正確的異步執(zhí)行方式：使用一個(gè) callback，或者返回一個(gè) promise 或 stream。
- fn
  該函數(shù)定義任務(wù)所要執(zhí)行的一些操作。通常來(lái)說(shuō)，它會(huì)是這種形式：
  gulp.src().pipe(someplugin())
  返回一個(gè) stream或者promise

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 
  return gulp.src('client/**/*.js') 
             .pipe(minify())
             .pipe(gulp.dest('build'));
});

接受一個(gè)callback

// 在 shell 中執(zhí)行一個(gè)命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) { 
     // 編譯 Jekyll 
    exec('jekyll build', function(err) { 
            if (err) return cb(err); // 返回 error 
           cb(); // 完成 task 
     }); 
});

注意： 默認(rèn)的，task 將以最大的并發(fā)數(shù)執(zhí)行，也就是說(shuō)，gulp 會(huì)一次性運(yùn)行所有的 task 并且不做任何等待。如果你想要?jiǎng)?chuàng)建一個(gè)序列化的 task 隊(duì)列，并以特定的順序執(zhí)行，你需要做兩件事：
給出一個(gè)提示，來(lái)告知 task 什么時(shí)候執(zhí)行完畢，
并且再給出一個(gè)提示，來(lái)告知一個(gè) task 依賴另一個(gè) task 的完成。

var gulp = require('gulp');
// 返回一個(gè) callback，因此系統(tǒng)可以知道它什么時(shí)候完成
gulp.task('one', function(cb) { 
// 做一些事 -- 異步的或者其他的 
     cb(err); // 如果 err 不是 null /undefined，則會(huì)停止執(zhí)行，注意，這樣代表執(zhí)行失敗了
});
// 定義一個(gè)所依賴的 task 必須在這個(gè) task 執(zhí)行之前完成
gulp.task('two', ['one'], function() {
 // 'one' 完成后
});
gulp.task('default', ['one', 'two']);

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
監(jiān)視文件，并且可以在文件發(fā)生改動(dòng)時(shí)候做一些事情。它總會(huì)返回一個(gè) EventEmitter 來(lái)emit change事件。
示例：

gulp.watch('js/**/*.js', function(event) { 
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

文件變動(dòng)后執(zhí)行一個(gè)或者多個(gè)task的。有js文件變動(dòng)，執(zhí)行jshint驗(yàn)證任務(wù)再刷新瀏覽器：

gulp.watch('js/**/*.js', ['jshint']).on('change', plugins.livereload.changed);

gulp.src通配符匹配
foo.js指明特定某個(gè)文件
*.js匹配當(dāng)前目錄下的所有js文件,不指名擴(kuò)展名則匹配所有類型
*/*.js匹配所有**第一層子文件夾**的js文件,第二層請(qǐng)用*/*/.js
**/*.js匹配**所有文件夾層次**下的js文件, 包括當(dāng)前目錄
?匹配文件路徑中的一個(gè)字符(不會(huì)匹配路徑分隔符)
[...]匹配方括號(hào)中出現(xiàn)的字符中的任意一個(gè)，當(dāng)方括號(hào)中第一個(gè)字符為^或!時(shí)，則表示不匹配方括號(hào)中出現(xiàn)的其他字符中的任意一個(gè).
!匹配任何與括號(hào)中給定的任一模式都不匹配的
下面以一系列例子來(lái)加深理解
能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
.能匹配 a.js,style.css,a.b,x.y
//.js能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來(lái)匹配所有的目錄和文件
/.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a//z能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因?yàn)橹挥袉?/em>*單獨(dú)出現(xiàn)才能匹配多級(jí)目錄
?.js 能匹配 a.js,b.js,c.js
a??能匹配 a.b,abc,但不能匹配ab/,因?yàn)樗粫?huì)匹配路徑分隔符
[xyz].js只能匹配 x.js,y.js,z.js,不會(huì)匹配xy.js,xyz.js等,整個(gè)中括號(hào)只代表一個(gè)字符
[^xyz].js能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

項(xiàng)目實(shí)例，項(xiàng)目結(jié)構(gòu)如下

Paste_Image.png

'modules/*/client/css/**/*.scss' 能匹配blog,core，manage三個(gè)目錄下client/css目錄下任意.scss文件，不管client/css/下有幾層;
['server.js', 'config/**/*.js', 'modules/*/server/**/*.js'] 匹配根目錄下server.js,config目錄下所有js文件，modules所有子目錄下的server文件夾所有js文件。
['modules/!(core)/server/routes/**/*.js', 'modules/core/server/routes/**/*.js'],匹配module下除core之外的子目錄下server/route下所有js文件。
['server/routes/**/*.js', '!./server/routes/app.js'] 這種是無(wú)法排除routes/app.js，因?yàn)榍昂笃ヅ浔磉_(dá)式不一直，正確應(yīng)為['server/routes/**/*.js', '!server/routes/app.js']
如果你想了解更多請(qǐng)參考gulp進(jìn)階傳送門

gulp使用

3.1 gulp之文件合并--gulp-concat

為了減少網(wǎng)絡(luò)請(qǐng)求，通常會(huì)對(duì)文件夾進(jìn)行合并。

安裝
　　gulp-concat插件安裝和gulp安裝雷同，不再贅述。

基本使用

var gulp = require('gulp'), concat = require('gulp-concat');//引入gulp及插件gulp-concat gulp.task('concat', function () {//定義任務(wù)concat gulp.src('src/js/*.js') //模糊匹配src/js文件夾下所有js文件 .pipe(concat('app.js'))//合并后的文件名 .pipe(gulp.dest('pub/dist/js'));//合并后文件路徑 });

執(zhí)行任務(wù)
gulp concat

結(jié)果

Paste_Image.png

上圖為合并壓縮重命名后的文件名。下面會(huì)一一講到。

3.2 gulp之js文件壓縮gulp-uglify

為了減少文件大小，通常會(huì)對(duì)文件進(jìn)行壓縮處理。

安裝
　　gulp-uglify插件安裝和gulp安裝雷同，不再贅述。

基本使用

var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('min', function () { gulp.src(['src/js/index.js','src/js/app.js']) //多個(gè)文件以數(shù)組形式或模糊匹配傳入. .pipe(uglify({ mangle: true,//類型：Boolean 默認(rèn)：true 是否修改變量名 compress: true//類型：Boolean 默認(rèn)：true 是否完全壓縮 })) .pipe(gulp.dest('pub/dist/js'));//壓縮后存放路勁 });

uglify具體參數(shù)查看

執(zhí)行任務(wù)
gulp min
執(zhí)行成功后可以看到pub/dist/js目錄下生成了新的文件

3.3 gulp之css文件壓縮gulp-minify-css

基本使用

var gulp = require('gulp'), cssmin = require('gulp-minify-css'); gulp.task('Cssmin', function () { gulp.src('src/css/*.css') .pipe(cssmin()) .pipe(gulp.dest('dist/css')); });

配合其他插件使用

var gulpLoadPlugins = require('gulp-load-plugins'), cssver = require('gulp-make-css-url-version'), plugins = gulpLoadPlugins();//load-plugins一次加載所有依賴的gulp插件 gulp.task('Cssmin', function () { return gulp.src('modules/*/client/css/*.css') .pipe(cssver()) //給css文件里引用文件加版本號(hào)（文件MD5） .pipe(cssmin({ advanced: false,//類型：Boolean 默認(rèn)：true [是否開(kāi)啟高級(jí)優(yōu)化（合并選擇器等）] compatibility: 'ie7',//類型：String 默認(rèn)：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式] keepBreaks: true//類型：Boolean 默認(rèn)：false [是否保留換行] })) .pipe(gulp.dest('public/dist')); });

插件gulp-make-css-url-version 給css文件里引用url加版本號(hào)（根據(jù)引用文件的md5生產(chǎn)版本號(hào)）
.class(background:url(../img/1.jpg?v=je82o9djZTYljusqe%2B3D%4B5A) no-repeat)

執(zhí)行任務(wù)
gulp Cssmin

3.4 gulp之圖片壓縮gulp-imagemin

壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）

基本使用

var gulp = require('gulp'), imagemin = require('gulp-imagemin'); gulp.task('Imagemin', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(imagemin()) .pipe(gulp.dest('dist/img')); });

帶參數(shù)，配合其他插件，具體參數(shù)查看

var gulp = require('gulp'), imagemin = require('gulp-imagemin'); gulp.task('Imagemin', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(imagemin({ optimizationLevel: 5, //類型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)） progressive: true, //類型：Boolean 默認(rèn)：false 無(wú)損壓縮jpg圖片 interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染 multipass: true //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化 })) .pipe(gulp.dest('public/dist')); });

由于有些圖片比較大，所以可以進(jìn)行深度壓縮，和只壓縮修改的圖片，沒(méi)修改就從緩存讀取

var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), //自動(dòng)加載插件 pngquant = require('imagemin-pngquant'),//深度壓縮插件 plugins = gulpLoadPlugins(); //實(shí)例化 gulp.task('testImagemin', function () { gulp.src('src/img/*.{png,jpg,gif,ico}') .pipe(plugins.cache(plugins.imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性 use: [pngquant()] //使用pngquant 插件深度壓縮 }))) .pipe(gulp.dest('dist/img')); });

3.5 自動(dòng)加載插件gulp-load-plugins

上面很多例子都用到這個(gè)插件。由于我們項(xiàng)目中有時(shí)候會(huì)用到很多插件，如果都用require進(jìn)來(lái)，我們得寫(xiě)很多行require代碼，雖然這樣沒(méi)問(wèn)題，但是會(huì)顯得很冗長(zhǎng)，所以gulp-load-plugins應(yīng)運(yùn)而生，幫我們加載這些插件。

基本使用
假定我們項(xiàng)目有如下插件：

Paste_Image.png

我們可以通過(guò)一行代碼就加載進(jìn)來(lái)

var gulp = require('gulp'), plugins = require('gulp-load-plugins')();

gulp-load-plugins命令規(guī)則為駝峰命名，比如我們引用gulp-rename就可以plugins.rename替代，去掉gulp-前綴，再使用駝峰命名。

注意： gulp-load-plugins在我們需要用到某個(gè)插件的時(shí)候，才去加載那個(gè)插件，并不是一開(kāi)始就全部加載進(jìn)來(lái)。因?yàn)間ulp-load-plugins是依賴package.json文件來(lái)加載插件的，所以請(qǐng)確保你需要的插件已經(jīng)加入package.json文件并已經(jīng)安裝完畢。

3.6 gulp之HTML文件壓縮gulp-htmlmin

可以壓縮頁(yè)面javascript、css，去除頁(yè)面空格、注釋，刪除多余屬性等操作

基本用法

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); //自動(dòng)插件引用 //htmlmin = require('gulp-htmlmin'); 單獨(dú)引用 gulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注釋 collapseWhitespace: true,//壓縮HTML collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//刪除所有空格屬性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css" minifyJS: true,//壓縮頁(yè)面JS minifyCSS: true//壓縮頁(yè)面CSS }; gulp.src('src/html/*.html') .pipe(plugins.htmlmin(options)) .pipe(gulp.dest('dist/html')); });

3.7 gulp之less文件編譯(gulp-less)

將less文件編譯成css，當(dāng)有l(wèi)ess文件發(fā)生改變自動(dòng)編譯less，并保證less語(yǔ)法錯(cuò)誤或出現(xiàn)異常時(shí)能正常工作并提示錯(cuò)誤信息。

基本使用

var gulp = require('gulp'), less = require('gulp-less'); gulp.task('less', function () { gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('src/css')); });

一般會(huì)使用通配符自動(dòng)編譯less

多模塊編譯less

var gulp = require('gulp'), less = require('gulp-less'), //本地安裝gulp-minify-css [npm install gulp-minify-css --save-dev] cssmin = require('gulp-minify-css'); gulp.task('testLess', function () { gulp.src('src/less/**/*.less') .pipe(less()) .pipe(cssmin()) //兼容IE7及以下需設(shè)置compatibility屬性 //.pipe(cssmin({compatibility: 'ie7'})) .pipe(gulp.dest('pub/css')); });

自動(dòng)編譯
如果每修改一次less，就要編譯一次，顯然是很繁瑣的，所以應(yīng)當(dāng)監(jiān)聽(tīng)less改動(dòng)，當(dāng)有l(wèi)ess文件發(fā)生改變時(shí)使其自動(dòng)編譯。配合實(shí)時(shí)重載live-reload插件輕松監(jiān)聽(tīng)。

新建less任務(wù)編譯less文件

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); //自動(dòng)插件引用 gulp.task('less', function () { return gulp.src('src/less/**/*.less') .pipe(plugins.less()) //編譯 .pipe(plugins.rename(function (file) { //把編譯后less文件重命名為css文件 file.dirname = file.dirname.replace(path.sep + 'less', path.sep + 'css'); })) .pipe(gulp.dest('./modules/'));//編譯后存放目錄 });

建立監(jiān)聽(tīng)事件

plugins.livereload.listen(); //啟動(dòng)live-reload監(jiān)聽(tīng) gulp .watch('src/less/**/*.less', ['sass', 'csslint']) .on('change', plugins.livereload.changed);

官方實(shí)時(shí)重載和CSS注入實(shí)例傳送門

3.8 gulp之sass文件編譯(gulp-sass)

sass和less同為css預(yù)處理器，gulp處理方法也差不多

用法

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); //自動(dòng)插件引用 gulp.task('less', function () { return gulp.src('src/less/**/*.sass') .pipe(plugins.sass()) //編譯sass .pipe(plugins.rename(function (file) { //重命名為css file.dirname = file.dirname.replace(path.sep + 'scss', path.sep + 'css'); })) .pipe(gulp.dest('./modules/'));//指定存放路徑 });

3.9 gulp之js語(yǔ)法檢查(gulp-jshint)

根據(jù)jshint規(guī)則檢查語(yǔ)法錯(cuò)誤，規(guī)范項(xiàng)目編碼。詳細(xì)規(guī)則請(qǐng)查看JHS詳細(xì)規(guī)則

基本使用

var gulp = require('gulp'), jshint = require("gulp-jshint"); gulp.task('jsLint', function () { gulp.src('client/**/*.js') .pipe(jshint()) .pipe(jshint.reporter()); // 輸出檢查結(jié)果 });

項(xiàng)目實(shí)例
具體規(guī)則在項(xiàng)目根目錄的.jshintrc文件里面

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); //自動(dòng)插件引用 gulp.task('jshint', function () { return gulp.src('client/**/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default'))// 調(diào)用default輸出結(jié)果 .pipe(plugins.jshint.reporter('fail')); //調(diào)用fail輸出檢查錯(cuò)誤 });

3.10 gulp之css語(yǔ)法檢查(gulp-csslint)

根據(jù)規(guī)則檢查CSS語(yǔ)法

基本用法

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); gulp.task('csslint', function (done) { return gulp.src(d'client/**/*.css') .pipe(plugins.csslint('.csslintrc'))//加載配置文件 .pipe(plugins.csslint.reporter()) .pipe(plugins.csslint.reporter(function (file) { if (!file.csslint.errorCount) { //有錯(cuò)誤，輸出具體錯(cuò)誤 done(); } })); });

3.11 gulp之重命名(gulp-rename)

這個(gè)插件上面已經(jīng)過(guò)了好多次了。

基本用法
同時(shí)輸出一個(gè)壓縮過(guò)和一個(gè)未壓縮的文件

var gulp = require('gulp'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), DEST = 'build/'; gulp.task('default', function() { return gulp.src('foo.js') // 這會(huì)輸出一個(gè)未壓縮過(guò)的版本 .pipe(gulp.dest(DEST)) // 這會(huì)輸出一個(gè)壓縮過(guò)的并且重命名未 foo.min.js 的文件 .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(gulp.dest(DEST)); });

3.12 gulp之測(cè)試gulp-mocha

mocha 是一個(gè)簡(jiǎn)單、靈活有趣的 JavaScript 測(cè)試框架，用于 Node.js 和瀏覽器上的 JavaScript 應(yīng)用測(cè)試

基本使用

var gulp = require('gulp'); var mocha = require('gulp-mocha'); gulp.task('default', function() { return gulp.src(['test/test-*.js'], { read: false }) .pipe(mocha({ reporter: 'spec', globals: { should: require('should') } })); });

文件改動(dòng)監(jiān)聽(tīng)

var gulp = require('gulp'); var mocha = require('gulp-mocha'); var gutil = require('gulp-util'); //gulp工具庫(kù) gulp.task('mocha', function() { return gulp.src(['test/*.js'], { read: false }) .pipe(mocha({ reporter: 'list' })) .on('error', gutil.log);}); //記錄錯(cuò)誤 gulp.task('watch-mocha', function() { gulp.watch(['lib/**', 'test/**'], ['mocha']);});

3.13 gulp之自動(dòng)刷新gulp-livereload

監(jiān)聽(tīng)到文件改動(dòng)自動(dòng)刷新前端頁(yè)面，不需要F5。
上面好幾個(gè)例子已經(jīng)使用過(guò)了,下面簡(jiǎn)單介紹下。

基本用法

var gulp = require('gulp'), plugins = require('gulp-load-plugins')(); //自動(dòng)插件引用 gulp.task('sass', function() { gulp.src('sass/**/*.scss') .pipe(plugins.sass()) .pipe(gulp.dest('css')) .pipe(plugins.livereload());}); gulp.task('watch', function() { plugins.livereload.listen(); //要在這里調(diào)用listen()方法 gulp.watch('sass/**/*.scss', ['sass']); });

3.14 gulp之自動(dòng)重啟node程序gulp-nodemon

監(jiān)聽(tīng)到node服務(wù)文件改動(dòng)自動(dòng)重啟node，官方文檔傳送門

基本用法

gulp.task('nodemon', function () { return plugins.nodemon({ script: 'server.js', nodeArgs: ['--debug'], ext: 'js,html', //文件擴(kuò)展名 env: { 'NODE_ENV': 'development'，//環(huán)境-開(kāi)發(fā)環(huán)境（生產(chǎn)環(huán)境） watch: ['server.js', 'config/**/*.js', 'modules/*/server/**/*.js']， tasks: ['jshint'] //任務(wù) }); });

3.15 gulp之其他插件

run-sequence
讓gulp任務(wù)之間可以單獨(dú)執(zhí)行，解除任務(wù)之間相互依賴，增強(qiáng)tasks復(fù)用性

基本用法

var runSequence = require('run-sequence')； gulp.task('default', function(done) { runSequence('env:dev', 'lint', ['nodemon', 'watch'], done); // env:dev', 'lint', 'nodemon', 'watch'均是任務(wù) });

browser-sync
靜態(tài)文件服務(wù)器，同時(shí)也支持瀏覽器自動(dòng)刷新，和gulp-livereload功能差不多。

基本使用

var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ files: "**", server: { baseDir: "./" } }); }); gulp.task('default', ["browser-sync"]);

刪除文件del
你也許會(huì)想要在編譯文件之前刪除一些文件,del 是一個(gè)node模塊，github傳送門

基本用法

var gulp = require('gulp'); var del = require('del'); gulp.task('clean:tmp', function (cb) { del([ 'dist/report.csv', // 使用通配模式來(lái)匹配 `tmp` 文件夾中的所有東西 'dist/tmp/**/*', // 我們不希望刪掉這個(gè)文件，使用！排除 '!dist/tmp/temp.json' ], cb); }); gulp.task('default', ['clean:tmp']);

結(jié)語(yǔ)

關(guān)于gulp用法以及常用插件就講解到這里，如果錯(cuò)誤請(qǐng)指正。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

mean開(kāi)發(fā)系列工具篇之gulp

mean開(kāi)發(fā)系列工具篇之gulp

前言

gulp簡(jiǎn)介

gulp安裝

gulp 使用

gulp API簡(jiǎn)介

gulp使用

3.1 gulp之文件合并--gulp-concat

3.2 gulp之js文件壓縮gulp-uglify

3.3 gulp之css文件壓縮gulp-minify-css

3.4 gulp之圖片壓縮gulp-imagemin

3.5 自動(dòng)加載插件gulp-load-plugins

3.6 gulp之HTML文件壓縮gulp-htmlmin

3.7 gulp之less文件編譯(gulp-less)

3.8 gulp之sass文件編譯(gulp-sass)

3.9 gulp之js語(yǔ)法檢查(gulp-jshint)

3.10 gulp之css語(yǔ)法檢查(gulp-csslint)

3.11 gulp之重命名(gulp-rename)

3.12 gulp之測(cè)試gulp-mocha

3.13 gulp之自動(dòng)刷新gulp-livereload

3.14 gulp之自動(dòng)重啟node程序gulp-nodemon

3.15 gulp之其他插件

結(jié)語(yǔ)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

mean開(kāi)發(fā)系列工具篇之gulp

前言

gulp簡(jiǎn)介

gulp安裝

gulp 使用

gulp API簡(jiǎn)介

gulp使用

3.1 gulp之文件合并--gulp-concat

3.2 gulp之js文件壓縮gulp-uglify

3.3 gulp之css文件壓縮gulp-minify-css

3.4 gulp之圖片壓縮gulp-imagemin

3.5 自動(dòng)加載插件gulp-load-plugins

3.6 gulp之HTML文件壓縮gulp-htmlmin

3.7 gulp之less文件編譯(gulp-less)

3.8 gulp之sass文件編譯(gulp-sass)

3.9 gulp之js語(yǔ)法檢查(gulp-jshint)

3.10 gulp之css語(yǔ)法檢查(gulp-csslint)

3.11 gulp之重命名(gulp-rename)

3.12 gulp之測(cè)試gulp-mocha

3.13 gulp之自動(dòng)刷新gulp-livereload

3.14 gulp之自動(dòng)重啟node程序gulp-nodemon

3.15 gulp之其他插件

結(jié)語(yǔ)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av