gulp入門

安裝 Node 和 gulp

---

gulp 是基於 node 實現的，那麼咱們就須要先安裝 node。
npm 是 node 的包管理工具，能夠利用它安裝 gulp 所需的包。（在安裝 node 時已經自動安裝了 npm）

在命令行輸入

npm install -g gulp

安裝gulp（-g 安裝全局性的gulp包）

若是一直沒安裝成功，請使用 cnpm 安裝(npm的國內加速鏡像)
或者請輸入sudo npm install -g gulp 使用管理員權限安裝。（可能會要求輸入密碼）
安裝時請注意命令行的提示信息，安裝完成後可在命令行輸入 gulp -v 以確認安裝成功。

使用 gulp 壓縮 JS

---

壓縮 js 代碼可下降 js 文件大小，提升頁面打開速度。在不利用 gulp 時咱們須要經過各類工具手動完成壓縮工做。

全部的 gulp 代碼編寫均可以看作是將規律轉化爲代碼的過程。
找到 js/ 目錄下的全部 js 文件，壓縮它們，將壓縮後的文件存放在 dist/js/ 目錄下。

gulp 的全部配置代碼都寫在 gulpfile.js 文件。
gulp 壓縮是須要用到的方法

• gulp.task(name, fn) - 定義任務，第一個參數是任務名，第二個參數是任務內容。
• gulp.src(path) - 選擇文件，傳入參數是文件路徑。
• gulp.dest(path) - 輸出文件
• gulp.pipe() - 管道，你能夠暫時將 pipe 理解爲將操做加入執行隊列

1、新建一個 gulpfile.js 文件

gulp-easy
└── gulpfile.js

---

2、在 gulpfile.js 中編寫代碼

// 獲取 gulp
let gulp = require('gulp')

require() 是 node （CommonJS）中獲取模塊的語法。

在 gulp 中你只須要理解 require() 能夠獲取模塊。

---

3、獲取 gulp-uglify 組件

// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify')

---

4、建立壓縮任務

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script', function() {
    // 1. 找到文件       2.壓縮文件      3.另存壓縮後的文件
    gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'))
})//js/*.js表示js文件夾下的全部.js文件，js/**/*.js表示js目錄下全部子目錄的js文件（任意多層級的處理）

---

5、安裝 gulp-uglify 模塊

由於咱們並無安裝 gulp-uglify 模塊到本地，因此找不到此模塊。

使用 npm 安裝 gulp-uglify 到本地

npm install -D gulp-uglify

安裝成功後你會看到以下信息：

gulp-uglify@1.1.0 node_modules/gulp-uglify
├── deepmerge@0.2.7
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)
chapter2 $

在你的文件夾中會新增一個 node_modules 文件夾，這裏面存放着 npm 安裝的模塊。

目錄結構：

├── gulpfile.js
└── node_modules
    └── gulp-uglify

接着輸入 gulp script 執行任務

gulp script
[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[13:34:57] Starting 'script'...
[13:34:57] Finished 'script' after 6.13 ms

---

6、編寫 js 文件

咱們發現 gulp 沒有進行任何壓縮操做。由於沒有js這個目錄，也沒有 js 目錄下的 .js 後綴文件。

建立 a.js 文件，並編寫以下內容

// a.js
function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')

目錄結構：

├── gulpfile.js
├──  js
│    └── a.js
└── node_modules
    └── gulp-uglify

接着在命令行輸入 gulp script 執行任務

gulp 會在命令行當前目錄下建立 dist/js/ 文件夾，並建立壓縮後的 a.js 文件。

目錄結構：

├── gulpfile.js
├──  js
│    └── a.js
├──  dist
│    └── js
│        └── a.js
└── node_modules
    └── gulp-uglify

function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

---

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

js/a.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 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 文件的自動化代碼編寫。

注意：使用 gulp.watch 後你的命令行會進入「運行」狀態，此時你不能夠在命令行進行其餘操做。可經過 Ctrl + C 中止 gulp。

Mac 下使用 control + C 中止 gulp

8、使用 gulp.task('default', fn) 定義默認任務

增長以下代碼

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

此時你能夠在命令行直接輸入 gulp +回車，運行 script 和 auto 任務。

最終代碼以下：

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

// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify')

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

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


// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啓動 script 任務和 auto 任務
gulp.task('default', ['script', 'auto'])

9、運行 gulp 查看效果

在命令行輸入 gulp +回車

你將看到命令行出現以下提示

gulp
[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/gulp-easy/gulpfile.js
[17:01:19] Starting 'script'...
[17:01:19] Finished script' 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/js 目錄，並建立 a.js 文件，此文件存放壓縮後的 js 代碼。

使用 gulp 壓縮 CSS

---

同壓縮js有必定相同的地方

壓縮 css 代碼可下降 css 文件大小，提升頁面打開速度。
1、安裝 gulp-minify-css 模塊

提示：你須要使用命令行的 cd 切換到對應目錄後進行安裝操做。

學習使用命令行

在命令行輸入

npm install -D gulp-minify-css

安裝成功後你會看到以下信息：(安裝時間可能會比較長)

gulp-minify-css@1.0.0 node_modules/gulp-minify-css
├── object-assign@2.0.0
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── clean-css@3.1.8 (commander@2.6.0, source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
├── vinyl-bufferstream@1.0.1 (bufferstreams@1.0.1)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, multipipe@0.1.2, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.3.2, dateformat@1.0.11)

2、參照 使用 gulp 壓縮 JS 建立 gulpfile.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、運行 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 代碼。

使用 gulp 壓縮圖片

---

壓縮 圖片文件可下降文件大小，提升圖片加載速度。
1、安裝 gulp-imagemin 模塊

提示：你須要使用命令行的 cd 切換至對應目錄再進行安裝操做和 gulp 啓動操做。

在命令行輸入

npm install -D gulp-imagemin

安裝成功後你會看到以下信息：(安裝時間可能會比較長)

gulp-imagemin@2.2.1 node_modules/gulp-imagemin
├── object-assign@2.0.0
├── pretty-bytes@1.0.3 (get-stdin@4.0.1)
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)
├── through2-concurrent@0.3.1 (through2@0.6.3)
├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)
└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)

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/gulp-easy/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%)

使用 gulp 編譯 LESS以及使用 gulp 編譯 Sass

需有在Sass官網下載最新版本Ruby
而後按照說明安裝sass

//1.刪除原gem源
gem sources --remove https://rubygems.org/

//2.添加國內淘寶源
gem sources -a https://ruby.taobao.org/

//3.打印是否替換成功
gem sources -l

//4.更換成功後打印以下
*** CURRENT SOURCES ***
https://ruby.taobao.org/
//安裝sass
gem install -g sass

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護。
安裝

---

npm install -D gulp-less

基本用法

// 獲取 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/css'))
});

// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 less 任務
    gulp.watch('less/**.less', ['less'])
})

// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啓動 less 任務和 auto 任務
gulp.task('default', ['less', 'auto'])

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

---

npm install -D gulp-ruby-sass

基本用法

// 獲取 gulp
var gulp = require('gulp')
// 獲取 gulp-ruby-sass 模塊
var sass = require('gulp-ruby-sass')

// 編譯sass
// 在命令行輸入 gulp sass 啓動此任務
gulp.task('sass', function() {
    return sass('sass/') 
    .on('error', function (err) {
      console.error('Error!', err.message);
   })
    .pipe(gulp.dest('dist/css'))
});


// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 images 任務
    gulp.watch('sass/**/*.scss', ['sass'])
});

// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啓動 sass 任務和 auto 任務
gulp.task('default', ['sass', 'auto'])

最終經常使用壓縮的集合代碼

// 引入gulp, 其實是Gulp的一個實例對象
let gulp = require('gulp');
// 是一個壓縮js的插件 ，返回的是一個函數
let uglify = require('gulp-uglify');
// 是一個壓縮css的插件，返回的是一個函數
let minifyCss = require('gulp-minify-css');
let babel = require('gulp-babel');
// 新建一個名叫script的任務
gulp.task('script', () => {
  //讀取js/*.js; 經過管道讓uglify()去處理全部的流，經過管道把文件寫入到目標文件中
  //**/表示js目錄任意多層級目錄下的js文件
  gulp.src('js/**/*.js').pipe(babel()).pipe(uglify()).pipe(gulp.dest('dist/js'));
});
// 新建一個名爲css的任務
gulp.task('css', () => {
  // 讀取css/*.css文件, 經過管道minifycss()去處理，再放入到目標文件
  gulp.src('css/**/*.css').pipe(minifyCss()).pipe(gulp.dest('dist/css'));
})
//新建一個名爲auto的任務
gulp.task('auto', function(){
  // 監聽js/*.js文件，若是發生變化則執行script
  gulp.watch('js/**/*.js', ['script']);
  gulp.watch('css/**/*.css', ['css']);
});
//新建一個名叫default的任務，執行這些任務以前，先執行script,css,auto任務
gulp.task('default', ['script', 'css', 'auto']);