gulp學習筆記1

標籤：start   mod   編寫   大小   提高   ...   node   comm   ann   

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 中編寫代碼

// 擷取 gulpvar 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‘])

 

gulp學習筆記1