Gulp新手入門教程

  Gulp 是一個自動化工具,前端開發者可使用它來處理常見任務:css

  •       搭建web服務器
  •       文件保存時自動重載瀏覽器
  •       使用預處理器如Sass、LESS
  •       優化資源,好比壓縮CSS、JavaScript、壓縮圖片

      固然Gulp能作的遠不止這些。若是你夠瘋狂,你甚至可使用它搭建一個靜態頁面生成器。Gulp真的足夠強大,但你必須學會駕馭它。html

      這是這篇文章的主要目的。幫助你瞭解Gulp的基礎用法,助你早日完成一統天下的大業。前端

      在咱們深刻了解以前,咱們先來講說爲何是Gulp。node

爲何是Gulp?

      相似Gulp的工具,咱們一般稱之爲構建工具。現在最流行的兩個構建工具是Gulp和Grunt。webpack

      已經有很是多的文章論證它們以前的異同,你隨便搜一下就知道了。web

      主要區別是你如何使用他們構建自動化工做流。與Grunt相比,Gulp更加簡潔,執行效率更高。正則表達式

      讓咱們繼續學習Gulp並搭建一個簡單的工做流。npm

咱們將要作的

      這篇文章的最後,你會擁有簡單的一個工做流:json

  •       搭建本地web服務器
  •       編譯Sass
  •       每當保存更改,自動刷新瀏覽器
  •       優化&壓縮資源

      除此以外,你還將學會使用簡單命令鏈式調用多個任務。gulp

安裝Gulp

      安裝Gulp以前你須要先安裝Node.js。
      若是你還沒安裝Node,你能夠在 這裏 下載。

      安裝完Node.js,使用Terminal(終端,win下是cmd)用下面命令安裝Gulp

      $ sudo npm install gulp -g

      只有mac用戶才須要sudo命令,而且不要把$符號也複製進去,這不是你的菜。

      npm install是指定從Node Package Manager(npm 你怕毛)安裝的命令。
      -g表示全局安裝,這樣你在電腦上任何位置都能只用gulp 命令。

      Mac 用戶須要管理員權限才能全局安裝,因此須要sudo

      接下來使用Gulp建立項目。

建立Gulp項目

      首先,咱們新建一個project文件夾,並在該目錄下執行npm init命令:

      $ npm init

      npm init命令會爲你建立一個package.json文件,這個文件保存着這個項目相關信息。好比你用到的各類依賴(這裏主要是插件)
      (終端會自動出現下面內容,這裏先隨便填就行)

      npm-init

      建立完以後,咱們執行下面的命令:

      $ npm install gulp --save-dev

      這一次,咱們局部安裝Gulp。使用—save-dev,將通知計算機在package.json中添加gulp依賴。

      package-json

      執行完以後,gulp將建立node_modules文件夾,裏面有個gulp文件夾。

      node-modules

      在正式開始以前,咱們再來明確下項目的目錄結構。

目錄結構

      Gulp很是之靈活,理解它的內部工做,你就能在項目中駕輕就熟。
      這篇文章,咱們使用通用的webapp目錄結構:

      structure

      在這個結構中,咱們使用app文件夾做爲開發目錄(全部的源文件都放在這下面),dist文件夾用來存放生產環境下的內容。

      這些文件名,你想怎麼起都行,但請務必記住你的目錄結構。
      如今咱們來建立gulpfile.js。

第一個Gulp任務

      (你須要先在根目錄下建立一個gulpfile.js文件)。

      var gulp = require(‘gulp‘);

      這行命令告知Node去node_modules中查找gulp包,先局部查找,找不到就去全局環境中查找。
      找到以後就會賦值給gulp變量,而後咱們就可使用它了。

      簡單的任務以下所示:

      gulp.task(‘task-name‘, function() {
      // Stuff here
      });

      task-name 是給你的任務起的名字,稍後在命令行中執行gulp task-name,將運行該任務。

      寫個HelloWorld,是這樣的:

      gulp.task(‘hello‘, function() {
      console.log(‘Hello World!‘);
      });

      命令行中執行:

      $ gulp hello

      那麼將會輸出Hello World!。 夠簡單吧?

      Gulp任務一般都會比這難一丁點,就一丁點。
      一般會包含兩個特定的Gulp方法和一些列Gulp插件。

      大概這樣:

      gulp.task(‘task-name‘, function () {
      return gulp.src(‘source-files‘) // Get source files with gulp.src
       .pipe(aGulpPlugin()) // Sends it through a gulp plugin
       .pipe(gulp.dest(‘destination‘)) // Outputs the file in the destination folder
      })

      正如你所見,兩個Gulp方法,src,dest,一進一出[捂臉.jpg]。
      下面用編譯Sass來舉栗子。

Gulp執行預處理

      咱們使用gulp-sass插件來編譯Sass。
      安裝插件的步驟是這樣的:

  •       使用npm install 命令安裝

          $ npm install gulp-sass --save-dev

  •       在gulpfile中引入插件,用變量保存

          var gulp = require(‘gulp‘);
          // Requires the gulp-sass plugin
          var sass = require(‘gulp-sass‘);

  •       在任務中使用

          gulp.task(‘sass‘, function(){
          return gulp.src(‘source-files‘)
           .pipe(sass()) // Using gulp-sass
           .pipe(gulp.dest(‘destination‘))
          });

      咱們須要給sass任務提供源文件和輸出位置。因此咱們先在項目中建立app/scss文件夾,裏面有個styles.scss文件。
      這個文件將在gulp.src中用到。

      sass處理以後,咱們但願它生成css文件併產出到app/css目錄下,能夠這樣寫:

      gulp.task(‘sass‘, function(){
      return gulp.src(‘app/scss/styles.scss‘)
       .pipe(sass()) // Converts Sass to CSS with gulp-sass
       .pipe(gulp.dest(‘app/css‘))
      });

      測試一下:

      // styles.scss
      .testing {
      width: percentage(5/7);
      }

      使用Terminal執行gulp sass,你將看到app/css/styles.css文件下會有下面的代碼:

      /* styles.css */
      .testing {
      width:71.42857%;
      }

      styles.css是gulp智動爲咱們生成的。
      percentage 是Sass的方法。

      使用Sass就這麼簡單。可是一般咱們不止有一個scss文件。這時候可使用Node通配符。

Node中的通配符

      通配符是一種匹配模式,容許你匹配到多個文件。不止是Node,不少平臺都有,有點像正則表達式。

      使用通配符,計算機檢查文件名和路徑進行匹配。

      大部分時候,咱們只須要用到下面4種匹配模式:

  1.       *.scss:*號匹配當前目錄任意文件,因此這裏*.scss匹配當前目錄下全部scss文件
  2.       **/*.scss:匹配當前目錄及其子目錄下的全部scss文件。
  3.       !not-me.scss:!號移除匹配的文件,這裏將移除not-me.scss
  4.       *.+(scss|sass):+號後面會跟着圓括號,裏面的元素用|分割,匹配多個選項。這裏將匹配scss和sass文件。

      那麼仍是上面的栗子,改造一下:

      gulp.task(‘sass‘, function() {
      return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss and children dirs
       .pipe(sass())
       .pipe(gulp.dest(‘app/css‘))
      })

      任何app下的scss文件,在執行命令以後將生成對應的css文件存放到相應路徑。(智動…)

      second-stylesheet

      如今咱們能處理多個文件了,可是不想每次都要執行命令,怎麼辦?
      Gulp就是爲懶人而生的,咱們可使用watch命令,自動檢測並執行。

監聽Sass文件

      Gulp提供watch方法給咱們,語法以下:

      // Gulp watch syntax
      gulp.watch(‘files-to-watch‘, [‘tasks‘, ‘to‘, ‘run‘]);

      將上面的栗子再改下:

      // Gulp watch syntax
      gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);

      一般咱們監聽的還不僅是一個文件,把它變成一個任務:

      gulp.task(‘watch‘, function(){
       gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
      // Other watchers
      })

      執行gulp watch命令。

      watch-start

      有了監聽,每次修改文件,Gulp都將自動爲咱們執行任務。

      watch-compile

      還不夠,修改完直接幫我刷新瀏覽器行嗎,我不想每次都要手動按Command + R;

使用Browser Sync自動刷新

      Browser Sync 幫助咱們搭建簡單的本地服務器並能實時刷新瀏覽器,它還能 同時刷新多個設備

      新插件?記住!安裝,引入,使用。

      $ npm install browser-sync --save-dev

      這裏沒有gulp-前綴,由於browser-sync支持Gulp,因此沒有人專門去搞一個給Gulp用。

      var browserSync = require(‘browser-sync‘);

      咱們建立一個broswerSync任務,咱們須要告知它,根目錄在哪裏。

      gulp.task(‘browserSync‘, function() {
       browserSync({
       server: {
       baseDir: ‘app‘
       },
       })
      })

      咱們稍微修改一下以前的代碼,讓每次css文件更改都刷新一下瀏覽器:

      gulp.task(‘sass‘, function() {
      return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss
       .pipe(sass())
       .pipe(gulp.dest(‘app/css‘))
       .pipe(browserSync.reload({
       stream: true
       }))
      });

      如今咱們配置好Broswer Sync了,咱們須要運行這兩個命令。

      咱們能夠在watch任務以前告知Gulp,先把browserSync和Sass任務執行了再說。
      語法以下:

      gulp.task(‘watch‘, [‘array‘, ‘of‘, ‘tasks‘, ‘to‘, ‘complete‘,‘before‘, ‘watch‘], function (){
      // ...
      })

      應用下來是這樣:

      gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
       gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
      // Other watchers
      })

      如今你執行gulp watch命令,在執行完browserSync和Sass,纔會開始監聽。

      bs-watch

      而且如今瀏覽器的顯示的頁面爲app/index.html。你修改了styles.scss以後,瀏覽器將自動屬性頁面。

      bs-change-bg

      不止是scss修改的時候須要刷新瀏覽器吧?再改改:

      gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
       gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
      // Reloads the browser whenever HTML or JS files change
       gulp.watch(‘app/*.html‘, browserSync.reload);
       gulp.watch(‘app/js/**/*.js‘, browserSync.reload);
      });

      到目前爲止,咱們作了下面三件事:

  •       可運轉的web開發服務
  •       使用Sass預處理器
  •       自動刷新瀏覽器

      接下來講說優化方面的技巧

優化CSS和JavaScript文件

      說到優化的時候,咱們須要想到:壓縮,拼接。也就是減小體積和HTTP次數。
      開發者面臨的主要問題是很難按照正確的順序合併文件。

      <body>
      <!-- other stuff -->
      <script src="js/lib/a-library.js"></script>
      <script src="js/lib/another-library.js"></script>
      <script src="js/main.js"></script>
      </body>

      因爲文件路徑的的不一樣,使用 https://www.npmjs.com/package/gulp-concat 等插件很是困難。
      慶幸的是,gulp-useref 解決了這個問題。

      gulp-useref會將多個文件拼接成單一文件,並輸出到相應目錄。

      <!-- build:<type> <path> -->
      ... HTML Markup, list of script / link tags.
      <!-- endbuild -->

      能夠是js,css,或者remove。若是你設爲remove,Gulp將不會生成文件。

      指定產出路徑。

      咱們想最終產出main.min.js。能夠這樣寫:

      <!--build:js js/main.min.js -->
      <script src="js/lib/a-library.js"></script>
      <script src="js/lib/another-library.js"></script>
      <script src="js/main.js"></script>
      <!-- endbuild -->

      咱們來安裝gulp-useref。

      $ npm install gulp-useref --save-dev

      引用

      var useref = require(‘gulp-useref‘);

      使用起來很是簡單:

      gulp.task(‘useref‘, function(){
      return gulp.src(‘app/*.html‘)
       .pipe(useref())
       .pipe(gulp.dest(‘dist‘));
      });

      (新版的gulp-useref已經不須要寫多餘的useref.assets了)

      執行useref命令,Gulp將合併三個script標籤成一個文件,並保存到dist/js/main.min.js。

      合併完以後,咱們再來壓縮。使用gulp-uglify插件。

      安裝

      $ npm install gulp-uglify --save-dev

      使用

      // Other requires...
      var uglify = require(‘gulp-uglify‘);
      gulp.task(‘useref‘, function(){
      return gulp.src(‘app/*.html‘)
       .pipe(uglify()) // Uglifies Javascript files
       .pipe(useref())
       .pipe(gulp.dest(‘dist‘))
      });

      搞定!

      注意:執行完useref後,html中的script路徑將只剩下main.min.js。

      useref-html

      王祖藍:完美~

      gulp-useref一樣能夠用在css上。除了壓縮,須要區分,其它內容同js同樣。因此咱們使用gulp-if來作不一樣處理。
      使用gulp-minify-css壓縮css。

      $ npm install gulp-if gulp-minify-css --save-dev

      應用

      var gulpIf = require(‘gulp-if‘);
      var minifyCSS = require(‘gulp-minify-css‘);
      gulp.task(‘useref‘, function(){
      return gulp.src(‘app/*.html‘)
      // Minifies only if it‘s a CSS file
       .pipe(gulpIf(‘*.css‘, minifyCSS()))
      // Uglifies only if it‘s a Javascript file
       .pipe(gulpIf(‘*.js‘, uglify()))
       .pipe(useref())
       .pipe(gulp.dest(‘dist‘))
      });

      搞定!

      再說說如何壓縮圖片。一樣easy。

優化圖片

      使用gulp-imagemin插件。

      $ npm install gulp-imagemin --save-dev

      引入,使用

      var imagemin = require(‘gulp-imagemin‘);
      gulp.task(‘images‘, function(){
      return gulp.src(‘app/images/**/*.+(png|jpg|gif|svg)‘)
       .pipe(imagemin())
       .pipe(gulp.dest(‘dist/images‘))
      });

      (全部的gulp插件都是有相關參數能夠配置,若是須要,請自行查看。)
      壓縮圖片可能會佔用較長時間,使用 gulp-cache 插件能夠減小重複壓縮。

      $ npm install gulp-cache --save-dev

      引入、使用

      var cache = require(‘gulp-cache‘);
      gulp.task(‘images‘, function(){
      return gulp.src(‘app/images/**/*.+(png|jpg|jpeg|gif|svg)‘)
      // Caching images that ran through imagemin
       .pipe(cache(imagemin({
       interlaced: true
       })))
       .pipe(gulp.dest(‘dist/images‘))
      });

      接下來,咱們說說發佈流程。

清理生成文件

      因爲咱們是自動生成文件,咱們不想舊文件摻雜進來。
      使用 del

      npm install del --save-dev

      引入、使用

      var del = require(‘del‘);
      gulp.task(‘clean‘, function() {
       del(‘dist‘);
      });

      可是咱們又不想圖片被刪除(圖片改動的概率不大),啓用新的任務。

      gulp.task(‘clean:dist‘, function(callback){
       del([‘dist/**/*‘, ‘!dist/images‘, ‘!dist/images/**/*‘], callback)
      });

      這個任務會刪除,除了images/文件夾,dist下的任意文件。
      爲了知道clean:dist任務何時完成,咱們須要提供callback參數。

      在某些時候咱們仍是須要清除圖片,因此clean任務咱們還須要保留。

      gulp.task(‘clean‘, function(callback) {
       del(‘dist‘);
      return cache.clearAll(callback);
      })

      噢,我真的是廢話太多了。把咱們學到的組合到一塊吧!

組合Gulp任務

      廢話了這麼多,咱們主要有兩條線路。

      第一條是開發過程,咱們便以Sass,監聽文件,刷新瀏覽器。

      第二條是優化,咱們優化CSS,JavaScript,壓縮圖片,並把資源從app移動到dist。

      開發任務咱們上面的watch已經組裝好了。

      gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
      // ... watchers
      })

      咱們也作一個來執行第二條線路。

      gulp.task(‘build‘, [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
      console.log(‘Building files‘);
      })

      可是這樣Gulp會同時觸發[]的事件。咱們要讓clean在其餘任務以前完成。
      這裏要用到 RunSequence 。

      $ npm install run-sequence --save-dev

      用法以下:

      var runSequence = require(‘run-sequence‘);
      gulp.task(‘task-name‘, function(callback) {
       runSequence(‘task-one‘, ‘task-two‘, ‘task-three‘, callback);
      });

      執行task-name時,Gulp會按照順序執行task-one,task-two,task-thre。
      RunSequence也容許你同時執行多個任務。

      gulp.task(‘task-name‘, function(callback) {
       runSequence(‘task-one‘, [‘tasks‘,‘two‘,‘run‘,‘in‘,‘parallel‘], ‘task-three‘, callback);
      });

      改造咱們的代碼:

      gulp.task(‘build‘, function (callback) {
       runSequence(‘clean:dist‘,
       [‘sass‘, ‘useref‘, ‘images‘, ‘fonts‘],
       callback
       )
      })

      開發任務咱們也用runSequence:

      gulp.task(‘default‘, function (callback) {
       runSequence([‘sass‘,‘browserSync‘, ‘watch‘],
       callback
       )
      })

      default? 若是你的任務名字叫作default,那麼只須要輸入gulp命令便可執行。

      這裏是咱們最終的 代碼倉庫

總結

      上面的的內容搭建了一個基本的Gulp工做流。還有更精彩的內容等着你去開發。這裏提供些插件:

      開發過程:

      優化:

      除了開發和優化過程,你可使用gulp-jasmine寫JavaScript單元測試,甚至使用gulp-rync直接部署dist文件到生產環境。

譯者的話

      花了點時間去學習Gulp,這篇文章是我找到比較全面的,很是適合新手入門。

      Gulp其實很是簡單,多玩一下,你就能徹底掌握它了,有能力的話,能夠嘗試開發Gulp插件。

      我在 前端收藏夾 以及 使用gulp生成sprites圖片和樣式表 都有實踐過。不過正如做者 Zell Liew 所說,Gulp的強大之處遠不止這些,因此他出了本電子書 automating your workflow ,能夠幫助你搭建屬於本身的工做流,剩下時間去喝咖啡,有興趣的能夠去購買,支持做者。

Thank you, Zell Liew!

 

      本文根據@Zell Liew的文章所譯,整篇譯文帶有咱們本身的理解和意思,若是有譯得很差的地方或者不對之處,還請你們指點。英文出處:Gulp for Beginners

      如需轉載,請註明出處: http://w3ctrain.com/2015/12/22/gulp-for-beginners/ ,歡迎加入前端Q羣( 467969149 )

      from: http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/

      Gulp新手入門教程

      標籤:

      原文地址:http://www.cnblogs.com/GarfieldEr007/p/5747308.html

相關文章
相關標籤/搜索