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.jsondevDependencies中

• 編譯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裏.