Gulp自動構建前端開發一體化

gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。

一、首先你要裝上nodejs環境；
http://nodejs.org；

在命令行輸入node -v 

回車（Enter），若是安裝正確，你會看到n
ode的版本號；

在命令行輸入npm -v 

若是正確，你能夠看到npm的版本號；

若是錯誤，請重試； 

二、npm介紹

（1）npm安裝插件

 npm install [-g] [--save-dev]

（2）npm卸載插件

 npm uninstall [-g] [--save-dev]

（3）npm更新插件

 npm update [-g] [--save-dev]（不加name就是更新全部的插件）
 npm help、 npm list

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。能夠使用淘寶鏡像安裝

注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；npm install cnpm -g --registry=https://registry.npm.taobao.org

三、全局安裝gulp
cnpm install gulp -g
回車（Enter）
在輸入：gulp -v
若是看到版本號，說明安裝正確；

四、配置package.json文件

{
"name": "test",//項目名稱（必須）
"version": "1.0.0",////項目版本（必須）
"description": "This is for study gulp project !",//項目描述（必須）
"homepage": "",//項目主頁
"repository": {//項目資源庫
"type": "",
"url": ""//地址
},
"author": {
"name": "xyphf",//做者
"email": "2766588380@qq.com"//郵箱
},
"license": "ISC", //項目許可協議
"devDependencies": {//項目依賴的插件
"gulp": "^3.8.11",
"gulp-concat": "^2.6.0",//文件合併
"gulp-cssmin": "^0.1.7",//css壓縮
"gulp-imagemin": "^3.1.1",//圖片壓縮
"gulp-jshint": "^2.0.2",//js檢查
"gulp-rename": "^1.2.2",//從新命名
"gulp-uglify": "^2.0.0",//js壓縮
"jshint": "^2.9.4"
}
}

　　　

注意：json文件內是不能寫註釋的，複製下列內容請務必刪除註釋；
你能夠將這個package.json複製下去，直接執行
npm install  

五、本地安裝gulp插件

cd定位項目目錄 npm install --save-dev

PS：細心的你可能會發現，咱們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

六、本地安裝gulp插件
前端項目須要的功能：
（1）圖片（壓縮圖片支持jpg、png、gif）
（2）樣式 （支持sass 同時支持合併、壓縮、重命名）
（3）javascript （檢查、合併、壓縮、重命名）
（4）html （壓縮）
（5）客戶端同步刷新顯示修改
（6）構建項目前清除發佈環境下的文件（保持發佈環境的清潔）

經過gulp plugins，尋找對於的gulp組件

gulp-imagemin: 壓縮圖片
gulp-ruby-sass: 支持sass
gulp-minify-css: 壓縮css
gulp-jshint: 檢查js
gulp-uglify: 壓縮js
gulp-concat: 合併文件
gulp-rename: 重命名文件
gulp-htmlmin: 壓縮html
gulp-clean: 清空文件夾
gulp-livereload: 服務器控制客戶端同步刷新（需配合chrome插件LiveReload及tiny-lr）

npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

　　

七、新建新建gulpfile.js文件（重要）

 

gulp有五個方法：src、dest、task、run、watch
src和dest：指定源文件和處理後文件的路徑
watch：用來監聽文件的變化
task：指定任務
run：執行任務
var gulp = require('gulp'), //基礎庫
htmlmin = require('gulp-htmlmin'),//html文件壓縮 
css = require('gulp-minify-css'),//用於壓縮CSS
less = require('gulp-less'),//解析less文件
imagemin = require('gulp-imagemin'),//圖片壓縮
jshint = require('gulp-jshint'), //js檢查
uglify = require('gulp-uglify'), //js壓縮
rename = require('gulp-rename'), //重命名
concat = require('gulp-concat'), //文件合併
clean = require('gulp-clean'), //清空文件夾
tinylr = require('tiny-lr') //liveload
rev = require('gulp-rev'),//版本號
server = tinylr(),
port = 35729,
liveload = require('gulp-liveload');//liveload

// HTML處理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';

gulp.src(htmlSrc)
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});

// 樣式處理
gulp.task('css', function () {
var cssSrc = './src/scss/*.scss',
cssDst = './dist/css';

gulp.src(cssSrc)
.pipe(sass({ style: 'expanded'}))
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});

// 圖片處理
gulp.task('images', function(){
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})

// js處理
gulp.task('js', function () {
var jsSrc = './src/js/*.js',
jsDst ='./dist/js';

gulp.src(jsSrc)
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});

// 清空圖片、樣式、js
gulp.task('clean', function() {
gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
.pipe(clean());
});

// 默認任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});

// 改版本號
gulp.task('rev',function(){
gulp.src(['./src/*.json','./src/*.html'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('dist/'))
});

// 監放任務 運行語句 gulp watch
gulp.task('watch',function(){

server.listen(port, function(err){
if (err) {
return console.log(err);
}

// 監聽html
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})

// 監聽css
gulp.watch('./src/scss/*.scss', function(){
gulp.run('css');
});

// 監聽images
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});

// 監聽js
gulp.watch('./src/js/*.js', function(){
gulp.run('js');
});

});
});

八、運行gulp
gulp 任務名稱
當執行gulp default或gulp將會調用default任務裏的全部任務 

9.LiveReload配置
一、安裝Chrome LiveReload
二、經過npm安裝http-server ，快速創建http服務
npm install http-server -g
三、經過cd找到發佈環境目錄dist
四、運行http-server，默認端口是8080
五、訪問路徑localhost:8080
六、再打開一個cmd，經過cd找到項目路徑執行gulp，清空發佈環境並初始化
七、執行監控 gulp
八、點擊chrome上的LiveReload插件，空心變成實心即關聯上，你能夠修改css、js、html即時會顯示到頁面中。

 

gulp經常使用地址

gulp官方網址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md

gulp 中文API：http://www.ydcss.com/archives/424