1】npm install gulp -g 全局安裝gulp奕翔，查看安裝是否成功gulp -v（首先安裝node，查看node是否安裝成功?node -v）
2】npm init 創(chuàng)建package.json文件
3】npm install gulp --save-dev 本地安裝gulp
4】在工程目錄下手動(dòng)創(chuàng)建gulpfile.js文件先改。
5】安裝插件依賴（用到哪個(gè)安裝哪個(gè)）
npm install gulp-concat --save-dev 文件打包
npm install gulp-rename --save-dev 文件重命名
npm install gulp-imagemin --save-dev? 圖片壓縮
npm install gulp-jslint --save-dev? js代碼校驗(yàn) 慎用
npm install gulp-minify-css --save-dev? css壓縮
npm install gulp-minify-html --save-dev? html壓縮
npm install gulp-uglify --save-dev? js壓縮
npm install gulp-connect --save-dev? ?設(shè)置鏈接服務(wù)
npm install gulp-clean --save-dev //每次打包項(xiàng)目文件后會(huì)新成新的文件疚察，舊文件就應(yīng)該刪除。
6】然后你可以在gulpfile.js里最先引入gulp模塊后 gulp仇奶。
var gulp = require("gulp");
gulp.task('default',function(){
? ? console.log('gulp啟動(dòng)成功');//測(cè)試gulp是否啟動(dòng)
})
7】js貌嫡、html壓縮合并（代碼例子）
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var concat = require('gulp-concat');
gulp.task('uglifyJs',function(){
? ? gulp.src('app/viewModules/**/*.js') //源文件所在路徑
? ? .pipe(concat('all.js'))?
? ? .pipe(gulp.dest('dist/js'))
? ? .pipe(uglify())
? ? .pipe(gulp.dest('dist/js'))? //輸出文件路徑
});
gulp.task('htmlMinify',function(){
? ? gulp.src('app/viewModules/**/*.html')
.pipe(concat('all.html'))
? ? .pipe(gulp.dest('dist/templates'))
? ? .pipe(minifyHtml())
? ? .pipe(gulp.dest('dist/templates'))
}
gulp.task('default',['uglifyJs','htmlMinify'])
gulp中文網(wǎng)https://www.gulpjs.com.cn
