gulpJs使用總結

1.gulp安裝

1.首先確保你已經正確安裝了nodejs環境。而後能夠全局方式安裝gulp：

$ npm install -g gulp

咱們能夠檢查一下gulp版本

$ gulp -v

這樣就完成了對全局的安裝
2.若是想在安裝的時候把gulp寫進項目package.json文件的依賴中，則能夠加上--save-dev：

$ npm install --save-dev gulp

其中--save-dev和--save的區別這裏也有清楚的解釋

這其實在composer安裝依賴包是同樣的 一個存在require一個存在require-dev

2.開始使用gulp

1.和其餘的構建工具同樣gulpjs也須要一個相應的配置文件gulpfile.js 執行

$ touch gulpfile.js

2.首先是一個簡單的egulpfile.js內容:

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

3.運行gulp

$ gulp

要運行gulp任務，只需切換到存放gulpfile.js文件的目錄，而後在命令行中執行gulp命令就好了，gulp後面能夠加上要執行的任務名，例如gulp task1，若是沒有指定任務名，則會執行任務名爲default的默認任務

這裏默認的名爲 default 的任務（task）將會被運行，可是這個任務並未作任何事情。
若是想要單獨執行特定的任務，請輸入

gulp <task> <othertask>

3.gulp API使用

gulp只有五個方法:task run watch src dest

1.gulp.src(globs[, options])

• globs參數是文件匹配模式(相似正則表達式),他的類型是String或Array,用來匹配文件路徑(包括文件名)，固然這裏也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數能夠爲一個數組。

• options爲可選參數。一般狀況下咱們不須要用到。

咱們這裏簡單能夠理解爲這個方法就是讀取你須要操做的文件的

當有多個匹配規則時 能夠傳入數組 如:

//使用數組的方式來匹配多種文件
gulp.src(['js/*.js','css/*.css','*.html'])

除此以外 數組還能夠進行排除的匹配(ps:數組的第一個元素不能進行排除模式)

gulp.src([*.js,'!a*.js']) //    匹配全部js文件，但排除掉以a開頭的js文件

gulp.src(['!a*.js',*.js]) //不會排除任何文件，由於排除模式不能出如今數組的第一個元素中

---

2.gulp.dest(path[, options])
簡單的說gulp.dest()是用來寫文件的

• path爲寫入文件的路徑

• options爲一個可選的參數對象，一般咱們不須要用到

gulp的運行流程大體是這樣的:

gulp的使用流程通常是這樣子的：首先經過gulp.src()方法獲取到咱們想要處理的文件流，

而後把文件流經過pipe方法導入到gulp的插件中，最後把通過插件處理後的流再經過pipe方法導入到gulp.dest()中，

gulp.dest()方法則把流中的內容寫入到文件中，這裏首先須要弄清楚的一點是，

咱們給gulp.dest()傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，

它生成文件的文件名使用的是導入到它的文件流自身的文件名，因此生成的文件名是由導入到它的文件流決定的，

即便咱們給它傳入一個帶有文件名的路徑參數，而後它也會把這個文件名當作是目錄名，例如：

var gulp = require('gulp');
gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最終生成的文件路徑爲 dist/foo.js/jquery.js,而不是dist/foo.js

經過指定gulp.src()方法配置參數中的base屬性，咱們能夠更靈活的來改變gulp.dest()生成的文件路徑。
當咱們沒有在gulp.src()方法中配置base屬性時，base的默認值爲通配符開始出現以前那部分路徑，例如：

gulp.src('app/src/**/*.css') //此時base的值爲 app/src

gulp.src()的bade屬性能夠在options裏指定

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/js/somedir/somefile.js'
  
gulp.src(script/lib/*.js, {base:'script'}) //配置了base參數，此時base路徑爲script
   //假設匹配到的文件爲script/lib/jquery.js
   .pipe(gulp.dest('build')) //此時生成的文件路徑爲 build/lib/jquery.js

咱們能夠這樣理解:
上面咱們說的gulp.dest()所生成的文件路徑的規則，其實也能夠理解成，用咱們給gulp.dest()傳入的路徑替換掉gulp.src()中的base路徑，最終獲得生成文件的路徑。

---

3.gulp.task(name[, deps], fn)

• name 爲任務名(請不要在名字中使用空格)

• deps 是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數

• fn 爲任務函數，咱們把任務要執行的代碼都寫在裏面。該參數也是可選的。

gulp中執行多個任務，咱們的項目裏確定會有處理相似css js images fonts 這樣的靜態文件的幾個任務
能夠經過任務依賴來實現。例如我想要執行one,two,three這三個任務，那咱們就能夠定義一個空的任務，而後把那三個任務當作這個空的任務的依賴就好了：

//只要執行default任務，就至關於把css,images,scripts這三個文件任務執行了
gulp.task('default',['css','images','scripts']);

若是任務相互之間沒有依賴，任務會按你書寫的順序來執行，若是有依賴的話則會先執行依賴的任務。

在處理所依賴的任務是異步的這樣的應用場景也是有幾種解決方案的：

• 依賴任務異步執行

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

gulp.watch()用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，例如文件壓縮等。

• glob 爲要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。

• opts 爲一個可選的配置對象，一般不須要用到

• tasks 爲文件變化後要執行的任務，爲一個數組

每當監視的文件發生變化時，就會調用這個函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息，type屬性爲變化的類型，能夠是added,changed,deleted；path屬性爲發生變化的文件的路徑

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //變化類型 added爲新增,deleted爲刪除，changed爲改變 
    console.log(event.path); //變化的文件的路徑
}); 

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

4.gulp 插件使用

gulp 插件庫

1.自動加載 gulp-load-plugins

安裝: npm install --save-dev gulp-load-plugins

在使用gulp插件時都須要require進來 而這個插件很好的解決了這個問題

gulp-load-plugins並不會一開始就加載全部package.json裏的gulp插件，而是在咱們須要用到某個插件的時候，纔去加載那個插件。

由於gulp-load-plugins是經過你的package.json文件來加載插件的，因此必需要保證你須要自動加載的插件已經寫入到了package.json文件裏，而且這些插件都是已經安裝好了的

下面這是一段一段很方便使用其餘插件的load-plugins代碼(其實就是匹配到package.json裏的插件):

var plugins = require("gulp-load-plugins")({
  pattern: ['gulp-*', 'gulp.*'],
  replaceString: /\bgulp[\-.]/
});

這樣就能夠經過 plugins.name()來使用咱們的插件 舉一個簡單的使用gulp-rename這個插件的例子

gulp.task('one',function () {
    gulp.src(paths.styles.src+'/one.css')
        .pipe(plugins.rename('new.css')) //而不用聲明相似var rename = require('gulp-rename')
        .pipe(gulp.dest(paths.styles.dest));
});

2.重命名gulp-rename

安裝：npm install --save-dev gulp-rename

var rename = require('gulp-rename');
//最後將src/styles/one.css 生成到 assets/styles/new.css
gulp.task('one',function () {
    gulp.src('src/styles/one.css')
        .pipe(rename('new.css'))
        .pipe(gulp.dest('asstes/styles'));
});

3.js文件壓縮 gulp-uglify

安裝：npm install --save-dev gulp-uglify

var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('src/scripts/*.js') // 要壓縮的js文件
    .pipe(uglify())  //使用uglify進行壓縮
    .pipe(gulp.dest('assets/js')); //壓縮後的路徑
});

4.文件合併 gulp-concat

安裝：npm install --save-dev gulp-concat

var gulp = require('gulp'),
    concat = require("gulp-concat")
    uglify = require("gulp-uglify");
 
//若是src/scripts下有one.js two.js three.js  那麼最後合併到assets/js/all.js
gulp.task('concat', function () {
    gulp.src('src/scripts/*.js')  //要合併的文件
    .pipe(uglify())  //使用uglify進行壓縮
    .pipe(concat('all.js'))  // 合併匹配到的js文件並命名爲 "all.js"
    .pipe(gulp.dest('assets/js'));
});

5.less和sass的編譯

安裝：npm install --save-dev gulp-less npm install --save-dev gulp-sass

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

固然還有其餘很是有用插件 gulp 插件庫

相關資料參考於:

• gulp Api文檔

• 前端構建工具gulp