嘴對嘴教你使用Gulp

什麼是Gulp?

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

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

---

安裝Gulp

1. 安裝Gulp以前你須要先安裝Node.js

2. 安裝 gulp：

$ npm install gulp -g  // 全局安裝gulp
$ npm install gulp --save-dev   // 做爲項目的開發依賴（devDependencies）安裝
複製代碼

---

建立Gulp項目

首先，在新建項目文件夾目錄下執行 npm init 命令：

<!-- 將建立一個package.json文件，保存着這個項目相關信息和插件依賴。 -->
$ npm init 
複製代碼

補充項目相關信息後，進行局部安裝Gulp

<!-- 使用—save-dev，將在package.json中添加gulp依賴 -->
<!-- 執行完以後，gulp將建立含有gulp文件夾的node_modules文件夾-->
$ npm install gulp --save-dev
複製代碼

在package.json自動生成以下的Json內容：

{
  "name": "gulpdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jw",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
  }
}
複製代碼

---

Gulp開發構建

建立通用的webapp目錄結構,並明確下項目的目錄結構。（此例目錄結構做爲學習示範，非固定）

|-app/              <!--app文件夾做爲開發目錄（全部的源文件都放在這下面）-->
 |-css/ 
 |-js/
 |-scss/
 |-images/
 |-fonts/
 |-index.html
|-dist/             <!--dist文件夾用來存放生產環境下的內容 -->
|-gulpfile.js       <!--配置gulp工具的搭建和使用 -->
|-node_modules/       
|-package.json      
複製代碼

在項目的gulpfile.js文件中：

var gulp = require('gulp');
複製代碼

這行命令告知Node去node_modules中查找gulp包，先局部查找，不然在全局環境中查找，並賦值使用gulp變量

牛刀小試：

gulp.task('hello', function() {
  console.log('Hello World!');
});
複製代碼

命令行中執行：$ gulp hello，將會輸出Hello World.

使用sass預處理插件

1. 安裝

$ npm install gulp-sass --save-dev
複製代碼

2. 引入插件

var gulp = require('gulp');
var sass = require('gulp-sass');
複製代碼

3. 使用

// 將對styles.scss進行預處理後生成styles.css
gulp.task('sass', function(){
    return gulp.src('app/scss/**/*.scss') //來源
      .pipe(sass())   //執行sass()
      .pipe(gulp.dest('app/css')) //生成
});
複製代碼

補充：【經常使用的4種匹配模式】 *.scss ： * 號匹配當前目錄任意文件，因此這裏 *.scss 匹配當前目錄下全部scss文件 **/*.scss ：匹配當前目錄及其子目錄下的全部scss文件。 !not-me.scss ：！號移除匹配的文件，這裏將移除not-me.scss *.+(scss|sass) ：+號後面會跟着圓括號，裏面的元素用|分割，匹配多個選項。這裏將匹配scss和sass文件。

---

使用Browser Sync插件自動刷新

1. 安裝

<!-- 這裏沒有gulp-前綴，由於browser-sync支持Gulp -->
$ npm install browser-sync --save-dev
複製代碼

2. 引入

var browserSync = require('browser-sync');
複製代碼

3. 使用

gulp.task('browserSync', function() {
   browserSync({
     server: {
       baseDir: 'app'  //須要告知它，根目錄在哪裏
     },
   })
})
複製代碼

使用watch監聽方法

Gulp提供watch方法給咱們，語法以下：

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
複製代碼

上例中的sass就能夠改形成這樣：

gulp.watch('app/scss/**/*.scss', ['sass']);
複製代碼

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

gulp.task('watch', function(){
    gulp.watch('app/scss/**/*.scss', ['sass']);
    // Other watchers
})
複製代碼

執行gulp watch命令監聽，每次修改文件，Gulp都將自動爲咱們執行任務。 4. 綜合使用

咱們稍微修改一下以前的sass設置，讓每次css文件更改都刷新一下瀏覽器：

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss') 
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true  //每次修改會自動刷新瀏覽器
    }))
});
複製代碼

使用修改監聽。

gulp.task('watch', function (){
  gulp.watch('app/scss/**/*.scss', ['sass']);
  // 當HTML或JS文件改變時，也從新加載瀏覽器
  gulp.watch('app/*.html', browserSync.reload);
  gulp.watch('app/js/**/*.js', browserSync.reload);
})
複製代碼

到目前爲止，咱們作了下面三件事：

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

---

Gulp打包優化構建

將開發目錄資源移到打包生產目錄

<!-- 以字體資源舉例 -->
gulp.task('fonts', function() {
  return gulp.src('app/fonts/**/*')
 .pipe(gulp.dest('dist/fonts'))
})
複製代碼

多文件拼接成單一文件並壓縮

1. 安裝

npm install gulp-useref --save-dev //文件拼接插件
npm install gulp-uglify --save-dev //js壓縮插件
npm install gulp-minify-css --save-dev //css壓縮插件
npm install gulp-if --save-dev //區分處理插件
複製代碼

2. 引用

var useref = require('gulp-useref')
var uglify = require('gulp-uglify')
var minifyCSS = require('gulp-minify-css')
var gulpIf = require('gulp-if')
複製代碼

3. 使用

--index.html--

<!--build:css css/main.min.css -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/styles.1.css">
<!-- endbuild -->

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/b-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
複製代碼

--gulpfile.js--

gulp.task('useref', function(){
    return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.css', minifyCSS()))
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulp.dest('dist'))
  });
複製代碼

圖片優化（gulp-imagemin）

1. 安裝

$ npm install gulp-imagemin --save-dev
$ npm install gulp-cache --save-dev  //減小重複壓縮
複製代碼

2. 引入

var imagemin = require('gulp-imagemin')
var cache = require('gulp-cache')
複製代碼

3. 使用

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）

因爲咱們是自動生成文件，咱們不想舊文件摻雜進來

1. 安裝

$ npm install del --save-dev
複製代碼

2. 引入

var del = require('del')
複製代碼

3. 使用

//情景1：所有清除
gulp.task('clean', function() {
  del('dist');
});

//情景2：不清除圖片文件
gulp.task('clean:dist', function(callback){
  del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});
複製代碼

---

Gulp組合

gulp.task('build', [`clean:dist`, `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('build', function (callback) {
  runSequence('clean:dist',
    ['sass', 'useref', 'images', 'fonts'],
    callback
  )
})
複製代碼

// 開發過程
gulp.task('default', function (callback) {
  runSequence(['sass','browserSync', 'watch'],
    callback
  )
})
複製代碼