打包神器的gulp必備導航

1.關於gulp

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。

在 Web 前端開發工作中有很多“重複工作”，比如壓縮CSS/JS文件。而這些工作都是有規律的。找到這些規律，並編寫 gulp 配置代碼,讓 gulp 自動執行這些“重複工作”。

2.安裝 Node 和 gulp

gulp 是基於 node 實現的，那麼我們就需要先安裝 node。

Node 是一個基於Chrome JavaScript V8引擎建立的一個平臺，可以利用它實現 Web服務，做類似PHP的事。

由於node的安裝在之前的博客裏進行過詳細介紹了，這裏就不在敘述。

安裝 gulp

npm 是 node 的包管理工具，可以利用它安裝 gulp 所需的包。（在安裝 node 時已經自動安裝了 npm）

在命令行輸入

npm install -g gulp 

注意：在工程中生成package.json文件，並安裝gulp至依賴

cnpm install  gulp  --save-dev

最後在工程目錄下創建gulpfile.js文件。
所有的工作（壓縮、混淆、重命名…）都需要在此文件中進行配置。
注意：所有的功能都需要使用插件（基於gulp開發的插件）來完成工作。

3.使用 gulp 壓縮 JS

安裝 gulp-uglify模塊

npm install gulp-uglify

一、在gulpfile.js 中編寫代碼

// 獲取 gulp
var gulp = require('gulp')
// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify')
// 壓縮 js 文件
// 在命令行使用 gulp min-js 啓動此任務
//參數一：任務名
gulp.task('min-js', function() {
    // 1\. 找到文件
    gulp.src('js/index.js')
    // 2\. 壓縮文件
        .pipe(uglify())
    // 3\. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

4.使用 gulp 壓縮 CSS

安裝 gulp-minify-css模塊

npm install gulp-minify-css

一、在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/index.css')
    // 2\. 壓縮文件
        .pipe(minifyCSS())
    // 3\. 另存爲壓縮文件
        .pipe(gulp.dest('dist/css'))
})

5.使用 gulp 壓縮圖片

安裝 gulp-imagemin模塊

npm install gulp-imagemin

一、在gulpfile.js 中編寫代碼

var gulp = require('gulp');

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

// 壓縮圖片任務
// 在命令行輸入 gulp images 啓動此任務
gulp.task('images', function () {
    // 1. 找到圖片
    gulp.src('images/1.jpg')
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存圖片
        .pipe(gulp.dest('dist/images'))
});

6.使用 gulp 編譯 LESS

安裝 gulp-less模塊

npm install gulp-less

一、在gulpfile.js 中編寫代碼

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

// 編譯less
// 在命令行輸入 gulp images 啓動此任務
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 () {
    // 監聽文件修改，當文件被修改則執行 images 任務
    gulp.watch('less/**.less', ['less'])
})

7.使用 gulp 編譯 Sass

安裝 gulp-ruby-sass模塊

gulp-ruby-sass

一、在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/') 
    .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'])
});

8.使用 gulp 執行多個任務及壓縮多個文件

一、在gulpfile.js 中編寫代碼

gulp.task('min-js', function() {
    // 1\. 找到文件
    //使用*去匹配JS下的所有文件進行批量壓縮
    gulp.src('js/*.js')
    // 2\. 壓縮文件
        .pipe(uglify())
    // 3\. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啓動 js 任務、css任務和 img 任務
gulp.task('default').gulp.series('min-js','css-min','img-min')