1.安裝node.js ?下載地址： http://nodejs.cn/
? ?打開node.js 命令行，輸入： node ?-v 奸披，有版本號(hào)谜酒，則正確安裝谨湘。
2.安裝淘寶鏡像 ：命令行輸入 ：
npm install -g cnpm --registry=http://registry.npm.taobao.org
目的：使下在速度更快媳握。
3.全局安裝gulp
cnpm install --global gulp
4.創(chuàng)建目錄稠曼，打開F盤形病，創(chuàng)建gulp文件夾。命令行輸入 ：
f:
cd gulp
5.安裝本地gulp
cnpm install --save-dev gulp
6.創(chuàng)建package.json文件
cnpm init
一路enter確定就行
7.web編輯器打開此gulp目錄霞幅，如hbuilder窒朋、webstorm。在gulp目錄下創(chuàng)建gulpfile.js文件蝗岖，gulp運(yùn)行的入口
8.確定何種打包壓縮，html榔至、js抵赢、css、img
9.js打包
var?gulp = require('gulp');
var?concat = require('gulp-concat');
var?uglify = require('gulp-uglify');
gulp.task('default',function(){???
????gulp.src('js/*.js')?// 路徑問題：gulpfile.js為路徑的起點(diǎn)唧取。此路徑表示js文件下的所有js文件铅鲤。
????.pipe(concat('all.js'))?//合并成的js文件名稱
????.pipe(uglify())?//壓縮
????.pipe(gulp.dest('build'));?//打包壓縮在build目錄下。
});
10.運(yùn)行枫弟；node.js輸入
? ? ? ? ? gulp
? ? ? ? ? 會(huì)有報(bào)錯(cuò)邢享，提示?gulp-concat組件沒有安裝。開始安裝 ：cnpm install gulp-concat --save-dev
再次運(yùn)行 ：gulp
再次報(bào)錯(cuò)淡诗，提示gulp-uglify組件沒有安裝骇塘。開始安裝 ：cnpm install gulp-uglify --save-dev
再次運(yùn)行 ：gulp
。韩容。款违。。群凶。插爹。。。赠尾。力穗。。气嫁。当窗。。杉编。
成功之后會(huì)
這里會(huì)看到 finished ‘default’ 超全，‘default’ 就是gulp.task任務(wù)開始的默認(rèn)入口。如果創(chuàng)建多個(gè)task任務(wù)邓馒，且修改任務(wù)名稱如：
var?gulp = require('gulp');
var?concat = require('gulp-concat');
var?uglify = require('gulp-uglify');
gulp.task('default',function(){???
????gulp.src('js/*.js')?// 路徑問題：gulpfile.js為路徑的起點(diǎn)嘶朱。此路徑表示js文件下的所有js文件。
????.pipe(concat('all.js'))?//合并成的js文件名稱
????.pipe(uglify())?//壓縮
????.pipe(gulp.dest('build'));?//打包壓縮在build目錄下光酣。
})
//css 打包壓縮
var?autoprefix = require('gulp-autoprefixer');
var?minifyCSS = require('gulp-minify-css');
gulp.task('style',?function() {?//task 任務(wù)名稱為style
gulp.src('.css/*.css')
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('styles'));
});
? ? ?重新運(yùn)行 ： gulp
結(jié)果：
會(huì)發(fā)現(xiàn)只運(yùn)行了 default的task任務(wù)疏遏。因?yàn)檫@是唯一默認(rèn)的gulp執(zhí)行入口。修改如下
var?gulp = require('gulp');
var?concat = require('gulp-concat');
var?uglify = require('gulp-uglify');
gulp.task('js',function(){???
????gulp.src('js/*.js')?// 路徑問題：gulpfile.js為路徑的起點(diǎn)救军。此路徑表示js文件下的所有js文件财异。
????.pipe(concat('all.js'))?//合并成的js文件名稱
????.pipe(uglify())?//壓縮
????.pipe(gulp.dest('build'));?//打包壓縮在build目錄下。
})
//css 打包壓縮
var?autoprefix = require('gulp-autoprefixer');
var?minifyCSS = require('gulp-minify-css');
gulp.task('style',?function() {?//task 任務(wù)名稱為style
gulp.src('.css/*.css')
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('styles'));
});
<br>gulp.task('default',function(){
????gulp.run(['js','style']);?//這里開始執(zhí)行多個(gè)task任務(wù)
});
如果遇到什么組件沒有安裝的話唱遭，想你應(yīng)該知道怎么操作了戳寸。
11.圖片壓縮
var?htmlmin = require('gulp-htmlmin');
gulp.task('html',?function() {
??return?gulp.src('../*.html')
????.pipe(htmlmin({collapseWhitespace:?true}))
????.pipe(gulp.dest('../'));
});
13.路徑問題自己修改
