gulp入門文件

MRZYD發表於2019-02-16

gulp是基於node實現的，所以我們首先需要安裝node。
下載node地址：開啟 https://nodejs.org/ 點選綠色的 INSTALL 按鈕下載安裝 node。
安裝好node之後，我們開始安裝gulp。
一、安裝gulp
npm 是 node 的包管理工具，可以利用他安裝 gulp 所需的包。（在安裝node時已經自動安裝了npm）
首先建立一個資料夾news，開啟Git Bash Here
在命令列輸入：

npm install -g gulp

若一直沒安裝成功，請使用 cnpm 安裝(npm的國內加速映象)

二、安裝依賴
在命令列輸入：

npm install
npm init -y
npm i -D gulp
npm i -D gulp-uglify

三、壓縮檔案
1、壓縮JS檔案
（1）、在news資料夾中新建一個`gulpfile.js`檔案，；
（2）、在`gulpfile.js`裡面編寫程式碼,

//獲取gulp：
var gulp = require(`gulp`);
（3）獲取`gulp-uglify`元件：
var uglify = require(`gulp-uglify`)
（4）建立壓縮任務
//壓縮 js 檔案
gulp.task(`script`, function() {
    // 1. 找到檔案
    gulp.src(`js/*.js`)
    // 2. 壓縮檔案
        .pipe(uglify())
    // 3. 另存壓縮後的檔案
        .pipe(gulp.dest(`dist/js`))
})

（5）、跳轉gulpfile.js 所在目錄
（6）、使用命令執行script 任務
在控制檯輸入 gulp 任務名 可執行任務，此處我們輸入 gulp script 回車。
注意：輸入 gulp script 後命令列將會提示錯誤資訊
// 在命令列輸入
gulp script

Error: Cannot find modu le `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 模組。
（7）、安裝 gulp-uglify 模組
使用 npm 安裝 gulp-uglify 到本地

npm install gulp-uglify

接著輸入 gulp script 執行任務
（8）、編寫 js 檔案
我們發現 gulp 沒有進行任何壓縮操作。因為沒有js這個目錄，也沒有 js 目錄下的 .js 字尾檔案。
建立 a.js 檔案，並編寫如下內容

// a.js
function demo (msg) {
    alert(`--------
` + msg + `
--------`)
}
demo(`Hi`)

接著在命令列輸入 gulp script 執行任務
gulp 會在命令列當前目錄下建立 dist/js/ 資料夾，並建立壓縮後的 a.js 檔案。
（9）、檢測程式碼修改自動執行任務
在`gulpfile.js`中編寫如下程式碼
// 監聽檔案修改，當檔案被修改則執行 script 任務
gulp.watch(`js/*.js`, [`script`]);
// 在命令列使用 gulp auto 啟動此任務
gulp.task(`auto`, function () {

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

})
接著在命令列輸入 gulp auto，自動監聽 js/*.js 檔案的修改後壓縮js。

$gulp auto
[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[21:09:45] Starting `auto`...
[21:09:45] Finished `auto` after 9.19 ms

此時修改 js/a.js 中的程式碼並儲存。命令列將會出現提示，表示檢測到檔案修改並壓縮檔案。

[21:11:01] Starting `script`...
[21:11:01] Finished `script` after 2.85 ms

至此，我們完成了 gulp 壓縮 js 檔案的自動化程式碼編寫。

2、壓縮css檔案
（1）、安裝 gulp-minify-css模組
在命令列輸入

npm install gulp-minify-css

（2）、參照 使用 gulp 壓縮 JS 建立 gulpfile.js 檔案編寫程式碼

// 獲取 gulp
var gulp = require(`gulp`)
 
// 獲取 minify-css 模組（用於壓縮 CSS）
var minifyCSS = require(`gulp-minify-css`)
 
// 壓縮 css 檔案
// 在命令列使用 gulp css 啟動此任務
gulp.task(`css`, function () {
    // 1. 找到檔案
    gulp.src(`css/*.css`)
    // 2. 壓縮檔案
        .pipe(minifyCSS())
    // 3. 另存為壓縮檔案
        .pipe(gulp.dest(`dist/css`))
})
 
// 在命令列使用 gulp auto 啟動此任務
gulp.task(`auto`, function () {
    // 監聽檔案修改，當檔案被修改則執行 css 任務
    gulp.watch(`css/*.css`, [`css`])
});
 
// 使用 gulp.task(`default`) 定義預設任務
// 在命令列使用 gulp 啟動 css 任務和 auto 任務
gulp.task(`default`, [`css`, `auto`])

（3）、建立 css 檔案
在 gulpfile.js 對應目錄建立 css 資料夾，並在 css/ 目錄下建立 a.css 檔案。

/* a.css */
body a{
    color:pink;
}

（4）、執行 gulp 檢視效果
在命令列輸入 gulp +回車
你將看到命令列出現如下提示

gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js
[17:01:19] Starting `css`...
[17:01:19] Finished `css` after 6.21 ms
[17:01:19] Starting `auto`...
[17:01:19] Finished `auto` after 5.42 ms
[17:01:19] Starting `default`...
[17:01:19] Finished `default` after 5.71 μs

gulp 會建立 dist/css 目錄，並建立 a.css 檔案，此檔案存放壓縮後的 css 程式碼。

3、壓縮images檔案
（1）、安裝 gulp-imagemin模組
提示：你需要使用命令列的 cd 切換至對應目錄再進行安裝操作和 gulp 啟動操作。
在命令列輸入

npm install gulp-imagemin

（2）、建立 gulpfile.js 檔案編寫程式碼
在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

// 獲取 gulp
var gulp = require(`gulp`);
 
// 獲取 gulp-imagemin 模組
var imagemin = require(`gulp-imagemin`)
 
// 壓縮圖片任務
// 在命令列輸入 gulp images 啟動此任務
gulp.task(`images`, function () {
    // 1. 找到圖片
    gulp.src(`images/*.*`)
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存圖片
        .pipe(gulp.dest(`dist/images`))
});
 
// 在命令列使用 gulp auto 啟動此任務
gulp.task(`auto`, function () {
    // 監聽檔案修改，當檔案被修改則執行 images 任務
    gulp.watch(`images/*.*)`, [`images`])
});
 
// 使用 gulp.task(`default`) 定義預設任務
// 在命令列使用 gulp 啟動 images 任務和 auto 任務
gulp.task(`default`, [`images`, `auto`])

（3）、在 images/ 目錄下存放圖片
在 gulpfile.js 對應目錄建立 images 資料夾，並在 images/ 目錄下存放圖片。
（4）、執行 gulp 檢視效果
在命令列輸入 gulp +回車
你將看到命令列出現如下提示

gulp
[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js
[18:10:42] Starting `images`...
[18:10:42] Finished `images` after 5.72 ms
[18:10:42] Starting `auto`...
[18:10:42] Finished `auto` after 6.39 ms
[18:10:42] Starting `default`...
[18:10:42] Finished `default` after 5.91 μs
[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)

4、壓縮less檔案
（1）、安裝 gulp-less模組
提示：你需要使用命令列的 cd 切換至對應目錄再進行安裝操作和 gulp 啟動操作。
在命令列輸入

npm install gulp-less

（2）、建立 gulpfile.js 檔案編寫程式碼
在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

// 獲取 gulp
var gulp = require(`gulp`)
// 獲取 gulp-less 模組
var less = require(`gulp-less`)
 
// 編譯less
// 在命令列輸入 gulp less 啟動此任務
gulp.task(`less`, function () {
    // 1. 找到 less 檔案
    gulp.src(`less/**.less`)
    // 2. 編譯為css
        .pipe(less())
    // 3. 另存檔案
        .pipe(gulp.dest(`dist/less`))
});
 
// 在命令列使用 gulp auto 啟動此任務
gulp.task(`auto`, function () {
    // 監聽檔案修改，當檔案被修改則執行 less 任務
    gulp.watch(`less/**.less`, [`less`])
})
 
// 使用 gulp.task(`default`) 定義預設任務
// 在命令列使用 gulp 啟動 less 任務和 auto 任務
gulp.task(`default`, [`less`, `auto`])

（3）、建立 less 檔案
在 gulpfile.js 對應目錄建立 less 資料夾，並在 less/ 目錄下建立 a.less 檔案。

/* a.less */
.import{
        a{
                color:red;
    }
}

（4）、執行 gulp 檢視效果
在命令列輸入 gulp +回車

gulp

壓縮後的less檔案為

.import a{
  color: red;
}

5、壓縮sass檔案
本章使用的是 ruby-sass 如果你不方便安裝 ruby 或編譯速度慢，建議使用 gulp-sass

請務必理解如下章節後閱讀此章節：

  1. [安裝 Node 和 gulp]
  2. [使用 gulp 壓縮 JS]

    Sass 是一種 CSS 的開發工具，提供了許多便利的寫法，大大節省了開發者的時間，使得 CSS 的開發，變得簡單和可維護。

    本章使用 ruby-sass 編譯 css,若你沒有安裝 ruby 和 sass 請移步 使用ruby.taobao安裝 Sass

    （1）、安裝gulp-ruby-sass模組

提示：你需要使用命令列的 cd 切換至對應目錄再進行安裝操作和 gulp 啟動操作。
在命令列輸入

npm install gulp-ruby-sass

（2）、建立 gulpfile.js 檔案編寫程式碼
在對應目錄建立 gulpfile.js 檔案並寫入如下內容：

// 獲取 gulp
var gulp = require(`gulp`)
// 獲取 gulp-ruby-sass 模組
var sass = require(`gulp-ruby-sass`)
 
// 編譯sass
// 在命令列輸入 gulp sass 啟動此任務
gulp.task(`sass`, function() {
    return sass(`sass/**.scss`) 
    .on(`error`, function (err) {
      console.error(`Error!`, err.message);
   })
    .pipe(gulp.dest(`dist/sass`))
});
 
 
// 在命令列使用 gulp auto 啟動此任務
gulp.task(`auto`, function () {
    // 監聽檔案修改，當檔案被修改則執行 images 任務
    gulp.watch(`sass/**/*.scss`, [`sass`])
});
 
// 使用 gulp.task(`default`) 定義預設任務
// 在命令列使用 gulp 啟動 sass 任務和 auto 任務
gulp.task(`default`, [`sass`, `auto`])

（3）、建立sass檔案
在 gulpfile.js 對應目錄建立 sass 資料夾，並在 less/ 目錄下建立 a.scss 檔案。

/* a.scss */
.import{
        a{
                color:red;
    }
}

（4）、執行 gulp 檢視效果
在命令列輸入 gulp +回車

gulp

壓縮後的sass檔案為

.import a{
  color: red;
}

ES6轉換成ES5的命令

npm i -D gulp-babel
npm i -D babel-core
npm i -D babel-preset-env

[完整程式碼]
(https://github.com/nimojs/gul…

相關文章