前提：已經(jīng)使用node安裝好全局gulp捂敌。
1.創(chuàng)建package.json并配置
打開(kāi)dos窗口，進(jìn)入在項(xiàng)目文件，輸入npm init愤诱，生成package.json文件，
{
"name":?"項(xiàng)目文件名",
"version":?"1.0.0",
"description":?"",
"main":?"index.js",
"scripts":?{
"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1"
},
"author":?"",
"license":?"ISC"
}
2.安裝gulp
dos窗口輸入npm（cnpm） install gulp? --save-dev
3.安裝插件
常用插件：gulp-uglify （JS壓縮）捐友，gulp-minify-css（CSS壓縮）转锈，gulp-minify-html（html壓縮），gulp-jshint（JS代碼檢查）楚殿，gulp-concat（文件合并）撮慨，gulp-less（編譯Less），gulp-sass（編譯Sass）脆粥，gulp-imagemin（壓縮圖片）砌溺，gulp-rename（文件重命名，主要配合壓縮插件使用）等
安裝方法：npm(cnpm) install 插件名 --save-dev?
安裝完成后打開(kāi)package.json文件可以看到配置變化
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0"
}
}
4.創(chuàng)建gulpfile.js文件变隔，這個(gè)很重要规伐，目前寫的所有的gulp的內(nèi)容都在這個(gè)js里
（1）加載插件
var gulp=require("gulp") ? 必需;
var sass=require("gulp-sass"); ? 用哪個(gè)加載哪個(gè)（以sass為例）
(2)使用插件
gulp的API介紹
（這里只寫一些常用的概念，詳細(xì)的請(qǐng)看http://www.gulpjs.com.cn/docs/api/）
gulp.task(name,[deps], fn)---定義一個(gè)任務(wù)匣缘，name為任務(wù)名猖闪；[ deps]為一個(gè)任務(wù)列表數(shù)組，里邊包含其他的任務(wù)名稱肌厨，這些任務(wù)會(huì)在當(dāng)前任務(wù)之前執(zhí)行培慌；fn為你要進(jìn)行的操作，一般格式為function（）{
? ? gulp.src()
? ? .pipe(someplugin())
}
gulp.src(globs[, options])柑爸，表示輸出所有匹配的文件吵护，例：gulp.src("styles/*.css")，匹配文件夾下所有的css后綴的文件；
gulp.dest(path[, options])馅而，表示對(duì)文件操作完成之后將要輸入的位置祥诽，例：gulp.dest("minCss/")，將文件放入minCss文件夾內(nèi)瓮恭，如果沒(méi)有雄坪，則自動(dòng)創(chuàng)建一個(gè)該文件夾；
gulp.watch(glob[, opts, cb])屯蹦，表示監(jiān)聽(tīng)一些文件诸衔，并在文件有改動(dòng)是進(jìn)行一些操作，例：gulp.watch("styles/*.scss",["sass"])颇玷，監(jiān)聽(tīng)styles文件夾中的所有scss文件笨农，如果發(fā)生變動(dòng)，就執(zhí)行名為sass的任務(wù)帖渠；
使用（以sass為例）
gulp.task("sass",function(){
? ? gulp.src("styles/*.scss") ? ? ? //輸出styles文件夾里的所有scss文件
? ? .pipe(sass()) ? ? ? ? ? ? ? ? ? ? ? ?//執(zhí)行sass插件
? ? .pipe(gulp.dest("styles/css")); ? ? //將文件輸入到styles/css文件夾中
})
gulp.task("default",function(){
gulp.start("sass"); ? ? ?//運(yùn)行sass任務(wù)
gulp.watch("styles/*.scss",["sass"]); ? //監(jiān)聽(tīng)文件變動(dòng)
});
在dos窗口中輸入gulp谒亦，會(huì)自動(dòng)運(yùn)行default任務(wù)。
基本使用方法就是這樣空郊，剛剛接觸gulp份招，做做筆記，加深印象狞甚。別說(shuō)锁摔，效果還挺好。
