gulp入門文檔

gulp是基於node實現的，因此咱們首先須要安裝node。
下載node地址：打開 https://nodejs.org/ 點擊綠色的 INSTALL 按鈕下載安裝 node。
安裝好node以後，咱們開始安裝gulp。
1、安裝gulp
npm 是 node 的包管理工具，能夠利用他安裝 gulp 所需的包。（在安裝node時已經自動安裝了npm）
首先建立一個文件夾news，打開Git Bash Here
在命令行輸入：

npm install -g gulp

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

2、安裝依賴
在命令行輸入：

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

3、壓縮文件
一、壓縮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('--------\r\n' + msg + '\r\n--------')
}
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 文件的自動化代碼編寫。

二、壓縮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 代碼。

三、壓縮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%)

四、壓縮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;
}

五、壓縮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...