? ? ? ? ?gulp前端構(gòu)建工具惜傲，其功能和grunt一樣但運(yùn)行起來比grunt快。gulp和grunt的區(qū)別是贝攒，gulp書寫方式跟nodejs相同盗誊，操作的是二進(jìn)制流，而grunt書寫方式一個(gè)json又一個(gè)json隘弊，相對(duì)會(huì)慢一些哈踱。
下面具體講gulp的安裝和使用；
1梨熙、首先確保你已經(jīng)正確安裝了nodejs環(huán)境开镣。然后以全局方式安裝gulp：
npm install? -global ?gulp-cli ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?sudo npm install -global gulp-cli
注意：sudo是以管理員身份執(zhí)行命令，一般會(huì)要求輸入電腦密碼
2咽扇、安裝完成后邪财，你可以使用下面的命令查看gulp的版本號(hào)以確保gulp已經(jīng)被正確安裝。
gulp -v
3质欲、全局安裝gulp后卧蜓，還需要在每個(gè)要使用gulp的項(xiàng)目中都單獨(dú)安裝一次。把目錄切換到你的項(xiàng)目文件夾中把敞，然后在命令行中執(zhí)行
cd ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?npm install --save-dev gulp
注意：① 弥奸、--save-dev 來更新package.json文件中“devDependencies”值；②奋早、mac如果不知道如何把目錄切換到你的項(xiàng)目文件夾時(shí)盛霎，可以將把文件拖到命令窗口中（會(huì)自動(dòng)生成路徑）
4、首先耽装，我們自己需要弄清楚項(xiàng)目需要哪些任務(wù)愤炸。根據(jù)項(xiàng)目需求安裝需要的模塊
npm install ?gulp-ruby-sass 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
注意：如果以上命令提示權(quán)限錯(cuò)誤，需要添加 sudo 再次嘗試掉奄。
5规个、建立gulpfile.js文件，放到你的項(xiàng)目目錄中姓建。然后在gulpfile.js文件中定義我們的任務(wù)了诞仓。下面是一個(gè)最簡(jiǎn)單的gulpfile.js文件內(nèi)容示例；
// 引入 gulp
var gulp = require('gulp');
// 引入組件
var jshint = require('gulp-jshint');? //用來檢查js代碼
var sass = require('gulp-sass');
var concat = require('gulp-concat'); ? //合并文件
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 檢查腳本
gulp.task('uglify:js',function(){
? ? ? ?gulp.src('src/js/*.js')
? ? ? .pipe(uglify())
? ? ? .pipe(concat('main.min.js'))
? ? ? .pipe(gulp.dest('build/js'))
});
gulp.task('uglify:img',function(){
? ? ? ?gulp.src('src/img/*.gif')
? ? ? .pipe(imagemin())
? ? ? .pipe(gulp.dest('build/img'))
});
gulp.task('uglify:html',function(){
? ? ? ? gulp.src('src/new.html')
? ? ? ?.pipe(htmlmin({ ?collapseWhitespace:true ?}))
? ? ? ?.pipe(gulp.dest('build/new.html'))
});
// 編譯Sass
gulp.task('sass', function() {
? ? ? ? ? gulp.src('./scss/*.scss')
? ? ? ? ? .pipe(sass())
? ? ? ? ?.pipe(gulp.dest('./css'));
});
// 合并速兔，壓縮文件
gulp.task('scripts', function() {
? ? ? ? ? gulp.src('./js/*.js')
? ? ? ? ?.pipe(concat('all.js'))
? ? ? ? ?.pipe(gulp.dest('./dist'))
? ? ? ? ?.pipe(rename('all.min.js'))
? ? ? ? ?.pipe(uglify())
? ? ? ? ? .pipe(gulp.dest('./dist'));
});
// 監(jiān)聽文件變化
gulp.watch('src/new.html',['uglify:html']);
gulp.watch('./js/*.js', function(){gulp.run('lint', 'sass', 'scripts');});
//注冊(cè)默認(rèn)任務(wù)
gulp.task('default',['uglify:css','uglify:js','uglify:img','uglify:html']);
注意：gulp只有五個(gè)方法： task 墅拭， run ， watch 涣狗， src 谍婉，和 dest
gulp ? ??官網(wǎng)：http://gulpjs.com/ ? ? ? ??
?插件：http://gulpjs.com/plugins
