gulp學習筆記1

gulp系列學習筆記：

1、gulp學習筆記1

2、gulp學習筆記2

3、gulp學習筆記3

4、gulp學習筆記4

1、安裝gulp

首先我們需要node環境，nodejs安裝這裡就不說了，不懂的可以自己百度。

在指令行輸入

npm install -g gulp       

安裝完成後可在指令行輸入 `gulp -v` 以确認安裝成功。

2、壓縮js

壓縮 js 代碼可降低 js 檔案大小，提高頁面打開速度。在不利用 gulp 時我們需要通過各種工具手動完成壓縮工作。但如果js檔案比較多時候，手動就比較麻煩，gulp這時候就可以派上用場了。

目标：找到 js/ 目錄下的所有 js 檔案，壓縮它們，将壓縮後的檔案存放在 dist/js/ 目錄下。

gulp 的所有配置代碼都寫在 gulpfile.js 檔案。建立一個 gulpfile.js 檔案，在 gulpfile.js 中編寫代碼

// 擷取 gulp
var gulp = require('gulp')

// 擷取 uglify 子產品（用于壓縮 JS）
var uglify = require('gulp-uglify')

// 壓縮 js 檔案
// 在指令行使用 gulp script 啟動此任務
gulp.task('script', function() {
    // 1. 找到檔案
    gulp.src('js/*.js')
    // 2. 壓縮檔案
        .pipe(uglify())
    // 3. 另存壓縮後的檔案
        .pipe(gulp.dest('dist/js'))
});      

• require() 是 node （CommonJS）中擷取子產品的文法。在 gulp 中你隻需要了解 require() 可以擷取子產品。
• gulp.task(name, fn) - 定義任務，第一個參數是任務名，第二個參數是任務内容。
• gulp.src(path) - 選擇檔案，傳入參數是檔案路徑。
• gulp.dest(path) - 輸出檔案,會自動建立一個dist和js檔案夾，将壓縮後的檔案放在裡面
• gulp.pipe() - 管道，你可以暫時将 pipe 了解為将操作加入執行隊列

運作

打開指令行使用 cd 指令跳轉至 gulpfile.js 檔案所在目錄。在控制台輸入 `gulp 任務名` 可運作任務，此處我們輸入 `gulp script` 回車。這裡我們建立的指令是 script ,是以輸入：

gulp script
Error: Cannot find module 'gulp-uglify'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)      

Cannot find module 'gulp-uglify' 沒有找到 gulp-uglify 子產品，那我們就安裝，輸入指令：

npm install gulp-uglify      

安裝完成後，輸入指令：

gulp script

[15:35:39] Using gulpfile ~/downloads/git/gulp/2/gulpfile.js
[15:35:39] Starting 'script'...
[15:35:39] Finished 'script' after 5.43 ms      

3、自動檢測代碼修改執行任務

一旦js檔案有修改 就必須重新在指令行輸入

gulp script

，這很麻煩。可以使用

gulp.watch(src, fn)

檢測指定目錄下檔案的修改後執行任務。在

gulpfile.js

中編寫如下代碼：

// 監聽檔案修改，當檔案被修改則執行 script 任務
gulp.watch('js/*.js', ['script']);      

但是沒有指令可以運作

gulp.watch()

，需要将

gulp.watch()

包含在一個任務中。修改代碼：

// 在指令行使用 gulp auto 啟動此任務
gulp.task('auto', function () {
    // 監聽檔案修改，當檔案被修改則執行 script 任務
    gulp.watch('js/*.js', ['script'])
})      

接着在指令行輸入

gulp auto

，自動監聽

js/*.js

檔案的修改後壓縮js。至此，我們完成了 gulp 壓縮 js 檔案的自動化代碼編寫。可通過

Ctrl + C

停止 gulp。

4、定義預設任務

增加如下代碼：

gulp.task('default', ['script', 'auto']);      

此時在指令行輸入：

gulp      

即可運作任務，并且會自動檢測。

最終代碼如下：

var gulp = require('gulp')
var uglify = require('gulp-uglify')

gulp.task('script', function() {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
})；

gulp.task('auto', function () {
    gulp.watch('js/*.js', ['script'])
})

gulp.task('default', ['script', 'auto'])      

文章參考了以下資料：

1、gulp詳細入門教程:  http://www.ydcss.com/archives/18;  

2、gulp API 文檔:  http://www.gulpjs.com.cn/docs/api/;  

3、gulp 入門指南:  https://github.com/huanshen/gulp-book; 

樹林美麗、幽暗而深邃，但我有諾言尚待實作，還要奔行百裡方可沉睡。 -- 羅伯特·弗羅斯特