gulp完全安裝教程

直接進入正題吧。說起來真是好久好久都沒有更新過bolg了呢……工作忙起來累成狗。現在辭職在家又懶得動。

環境：mac osx

步驟一：安裝node。

這一步就不贅述了。直接上https://nodejs.org/en/ 下載安裝就可以了。安裝完成後開啟終端輸入

npm -v

檢視是否安裝成功。看到版本號即為成功

以下為成功提示：

步驟二：安裝gulp。

先全域性安裝gulp，然後要進入你的每個需要用到gulp的專案裡單獨安裝gulp。

開啟“終端”,輸入

$ npm install gulp -g

全域性安裝gulp後cd進入你需要用到gulp的專案檔案裡。建立一個專屬於gulp的資料夾。在這個資料夾裡建立package.json，記得加上{}，儲存。如圖

 

接著在終端中輸入：

$ npm install gulp --save-dev

上述指令將gulp安裝到本地端的專案內，並將記錄於package.json內的devDependencies中。

步驟三 安裝外掛

• 編譯less (gulp-less)
• Autoprefixer (gulp-autoprefixer)
• 縮小化(minify)CSS (gulp-minify-css)
• JSHint (gulp-jshint)
• 拼接 (gulp-concat)
• 醜化(Uglify) (gulp-uglify)
• 圖片壓縮 (gulp-imagemin)
• 即時重整(LiveReload) (gulp-livereload)
• 清理檔案 (gulp-clean)
• 圖片快取，只有更改過得圖片會進行壓縮 (gulp-cache)
• 更動通知 (gulp-notify)

在終端輸入以下指令一次性安裝上述外掛
$ npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

接下來，我們需要建立一個gulpfile.js檔案，並且載入這些外掛

var gulp = require('gulp'),  
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');

步驟四 編譯
最基本的寫法是把所有任務配置都寫在gulpfile.js裡.