1. sudo npm install -g gulp //以管理員身份全局安裝gulp ?（執(zhí)行命令行之前確保本地已經安裝node.js 和npm ）
gulp-v ?//查看是否安裝成功
2. npm install—-save-dev gulp //接下來，我們需要將gulp安裝到項目本地
這里，我們使用—-save-dev來更新package.json文件蹦肴，更新devDependencies值钙蒙，以表明項目需要依賴gulp贸宏。
3.新建Gulpfile文件酵使，運行gulp?
安裝好gulp后我們需要告訴它要為我們執(zhí)行哪些任務袭异，首先钳垮，我們自己需要弄清楚項目需要哪些任務惑淳。
.檢查Javascript
.編譯Sass（或Less之類的）文件
.合并Javascript
.壓縮并重命名合并后的Javascript
npm? install? gulp-jshint gulp-sass gulp-less gulp-concat? gulp-minify-css ? gulp-uglify gulp-rename ?gulp-watch --save-dev?
提醒下，如果以上命令提示權限錯誤饺窿，需要添加sudo再次嘗試歧焦。
4.新建gulpfile文件
現在，組件都安裝完畢短荐，我們需要新建gulpfile文件以指定gulp需要為我們完成什么任務倚舀。
gulp只有五個方法：task，run忍宋，watch痕貌，src，和dest糠排。
在項目根目錄新建一個js文件并命名為gulpfile.js舵稠，把下面的代碼粘貼進去：
// 引入 gulp
var gulp =require('gulp');
// 引入組件
var ?jshint =require('gulp-jshint');//js語法檢測
var ?sass =require('gulp-sass');//sass
var less = require('gulp-less');//less
var cssmin = require('gulp-minify-css');//壓縮css
var ?concat =require('gulp-concat');//合并
var uglify =require('gulp-uglify');//壓縮就是
var ?rename =require('gulp-rename'); //重命名
var watch ?= require('gulp-watch')；
// 檢查腳本
gulp.task('lint',function(){? ??
? ? ?gulp.src('./js/*.js')? ? ? ?
? ? .pipe(jshint())? ? ? ?
? ?.pipe(jshint.reporter('default'));
});
// 編譯Sass
gulp.task('sass',function(){? ??
? ? ?gulp.src('./scss/*.scss')? ? ? ??
? ? .pipe(sass()) ? ? ?
? ?.pipe(cssmin())?
? ?.pipe(gulp.dest('./css'));
});
//編譯less
gulp.task('less', function () {
? ? gulp.src('./less/*.less')
? ? .pipe(less())
? ? .pipe(cssmin()) ?
? ? .pipe(gulp.dest('./app/dist/css'));
});
// 合并，壓縮文件
gulp.task('scripts',function(){? ??
? ? ?gulp.src('./js/*.js')? ? ? ??
? ? .pipe(concat('all.js')) ? ? ? ? ? ?//目錄下的js全部合并到all.js
? ? .pipe(gulp.dest('./dist')) ? ? ? ?//將文件放到這個目錄下面
? ? .pipe(rename('all.min.js')) ? ? //重命名
? ? .pipe(uglify()) ? ? ? ? ? ? ? ? ? ? ? ? //壓縮
? ?.pipe(gulp.dest('./dist')); ? ? ? ? //放到此目錄下面
});
// 默認任務
gulp.task('default',function(){
? ? ? ? ?gulp.run('lint','sass','scripts','less');// 監(jiān)聽文件變化
? ? ? ? ?gulp.watch('./js/*.js',function(){??
? ? ? ? ? ? ? gulp.run('lint','sass','scripts','less');? ??
? ? ? ? ? });
});
這時哺徊，我們創(chuàng)建了一個基于其他任務的default任務室琢。使用.run()方法關聯和運行我們上面定義的任務，使用.watch()方法去監(jiān)聽指定目錄的文件變化落追，當有文件變化時盈滴，會運行回調定義的其他任務。
//監(jiān)聽js/less變化
gulp.task('default',function () {
? ? gulp.run(['less']);
? ? gulp.watch('./less/**.less', ['less']);?
});
5.gulp
啟動文件 ? 如果正常啟動則可以愉快的編程了
