【乾貨】一篇文章學會Gulp(Getting started with Gulp)

拋開Grunt,又有一個新的自動化構建系統成爲新的領跑者。那就是Gulp。css

Gulp是一種直觀、自動化構建的工具。html

爲何前端er會這麼感興趣Gulp?我相信你們都有個思想:要麼不作事,要作事就要把事情作得最好!前端

Gulp就是幫你把前端的事情作好的一個工具!Gulp是基於Node和NPM,安裝教程點這裏node

什麼是Gulp?

Gulp使用了node.js的流控制系統,使其(Gulp)構建更快,由於它不須要將臨時文件/文件夾寫入磁盤。android

若是你想了解更多關於流控制系統——這不是必需的——這篇文章頁是很值得推薦大家去看的。ios

Gulp容許你去指定你的源文件是哪些,而後用管道的方式傳輸你的源文件到一堆的插件中進行編譯,最後得出你想要的結果,這比Grunt的設置每一個插件的輸入輸出的繁瑣操做簡單多了。git

管道流操做:

咱們要修改編譯、合併或者壓縮的文件都放在一塊兒,而後經過管道流,管道流裏面含有多種的插件,這些插件會按照你指定的操做順序的方法進行對文件的操做,操做事後生成新的目標文件。github

如出現下列錯誤:

Error: Cannot find module 'jshint/src/cli

我認爲開發人員在最新版本中改變了gulp-jshint的結構致使了這個問題,解決問題的辦法:npm

$ npm install --save-dev jshint gulp-jshint

舉一個相同的例子對比一下Grunt和Gulp(Sass編譯):

Grunt:

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Grunt須要單獨配置每個插件,爲每一個插件指定源文件和結果輸出的路徑。(賊麻煩好嗎。)json

例如:咱們輸入一個文件到Sass編譯的插件裏,而後保存輸出。在這以後咱們還要配置Autoprefixer來輸入Sass的輸出,而後輸出另外一個文件。讓咱們看一看一樣的配置在Gulp下是怎麼作的吧:

Gulp:

gulp.task('sass', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
       .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
       .pipe(gulp.dest('dist/assets/css'))
});

在Gulp下咱們只須要配置一個文件。這是由Sass插件修改的,傳遞給Autoprefixer插件修改,最後咱們獲得一個文件。這個過程加快的構建過程,由於咱們不須要閱讀和編寫沒必要要的文件。

 

如今你已經基本瞭解Gulp了,如今來安裝Gulp和開始建立一些例子吧!

安裝Gulp:

在咱們配置文件以前,咱們須要全局安裝gulp:

$ npm install gulp -g

在這裏咱們是要全局安裝gulp,由於咱們須要給權限到gulp的CLI上。安裝完成後咱們須要進入到咱們的項目根目錄下。

$ cd XXX
$ npm install gulp --save-dev

運行完這兩條命令咱們在package.json中的devDependencies看到了有gulp。

安裝gulp插件:

咱們將安裝一些的插件來完成如下的任務:

運行如下命令安裝這些插件(建議用cnpm,插件太多):

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-cache gulp-livereload del --save-dev

這條命令將會安裝全部必須的插件和保存在package.json的devDependencies中。更多的插件在這裏

引入插件:

下一步,咱們須要建立一個gulpfile.js文件和引入插件:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'); jshint
= require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'), concat = require('gulp-concat'),
cache = require('gulp-cache'), notify
= require('gulp-notify'), livereload = require('gulp-livereload'), del = require('del');

Gulp插件與Grunt插件有一點不一樣——它們被設計成只能夠作一件事和這件事必定要作到最好。

來個示例;Grunt的imagemin使用緩存,以免壓縮已經壓縮的圖像。對於gulp,這將用一個緩存插件來完成,它也能夠用來緩存其餘的東西。這爲構建過程增長了額外的靈活性。

其實咱們能夠像Grunt同樣使用自動加載全部已安裝的插件,但爲了這篇文章的目的,咱們將堅持手動方法。

建立任務:

編譯和壓縮Sass:

首先,咱們將配置Sass編譯。咱們將編譯Sass做爲擴展,經過自動修復程序運行它並將它保存到咱們的目的地。而後咱們會建立一個小型的:min版本,自動刷新頁面並通知任務已經完成。是否是賊酷?

gulp.task('styles', function() {
  return sass('src/styles/main.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(notify({ message: 'styles任務完成' }));
});

在這裏再作點解釋再往前走。

gulp.task('styles', function() { ... )};

這個gulp.task是用來建立gulp任務的API。上面能夠用 $ gulp styles 從終端運行。

return sass('src/styles/main.scss', { style: 'expanded' })

這是gulp-ruby-sass的API,咱們定義源文件並傳遞任何選項。對於不少其餘插件,你可使用gulp.src的API來控制文件。好比:*.scss能夠匹配全部以.scss爲結尾的文件。經過返回流控制系統使他具備異步性,在咱們收到通知以前,確保任務已經完成。

.pipe(autoprefixer('last 2 version'))

咱們用.pipe()經過管道傳輸方式把源文件傳輸到插件上。一般各類插件的選項是在他們各自的GitHub頁面上找到的。爲了方便起見,我把它們連在一塊兒了。管道是可連接的,所以您能夠在流控制系統中添加儘量多的插件。

.pipe(gulp.dest('dist/assets/css'));

gulp.dest的API爲咱們設定最終輸出文件的位置。一個任務能夠有多個目的地,一個能夠輸出擴展版本,另外一個能夠輸出壓縮版本。這在上面的styles任務中演示。

我建議去看看gulp的API文檔,以更好地瞭解這些方法。英文文檔其實看起來也沒那麼嚇人!

代碼規範+合併+壓縮JavaScript:

經過以上解釋我但願大家能掌握怎麼使用gulp了,接下來咱們把腳本任務設爲規範+合併+壓縮:

gulp.task('scripts', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts任務完成' }));
});

在這裏咱們經過gulp.src的API把咱們要修改的文件放到管道流中。詳細流程見下圖(如看不清鼠標右鍵->在新標籤頁中打開圖片):

 

壓縮圖片:

gulp.task('images', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('dist/assets/img'))
    .pipe(notify({ message: 'Images任務完成' }));
});

這個任務會把images文件夾下的全部圖片文件經過imagemin插件進行圖片壓縮。咱們能夠更進一步,利用緩存來保存在每次運行這個任務時已經壓縮的圖像。咱們須要的是以前安裝的gulp - cache插件。設置這個,咱們須要去改變這一行的:

.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

改爲

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

如今只有新的或改變的圖像將被壓縮。

清除文件:

在部署以前,清理目標文件夾並從新構建文件是一個好主意——以防任何已經從源文件中刪除,並在目標文件夾中掛起(例子:空文件夾):

gulp.task('clean', function() {
    return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']);
});

在這裏咱們不須要使用gulp插件,由於咱們能夠在gulp中直接利用節點模塊。咱們使用返回來確保任務在退出前完成。

默認任務:

咱們也能夠建立一個默認任務,能夠在命令行中直接 $ gulp 就可使用,下面的例子就是運行咱們已經建立好的三個任務:

gulp.task('default', function() {
    gulp.start('styles', 'scripts', 'images');
});

注意在gulp . task中附加的數組。在這裏,咱們能夠定義任務依賴項。在這個示例中,clean任務將在任務開始以前運行。在Gulp中,任務同時運行,沒有順序完成,因此咱們須要確保在運行額外任務以前完成clean的任務。

監測任務:

爲了查看咱們的文件並在它們發生變化時執行必要的任務,咱們首先須要建立一個新任務,而後使用gulp.watch的API監測文件:

gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('src/images/**/*', ['images']);

});

當咱們運行 $ gulp task 的時候它就會自動監測這些文件。

實時刷新:

gulp也能夠在遊覽器上監測文件變化實時刷新頁面,不過在這裏須要遊覽器安裝插件。另外我會專門寫個博客是專對於gulp的實時刷新:

gulp.task('watch', function() {

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

爲了能讓任務能執行,你要在遊覽器中安裝LiveReload插件

把全部任務集合在一塊兒:

在這裏我收集了我平時須要的全部gulp插件:GitHub地址

 

以上。

相關文章
相關標籤/搜索