刚开始我先接触了grunt，但是再学习gulp之后，个人觉得gulp的使用方式比较统一，不像grunt那么混乱，更易于维护，自己比较容易接受，所以选用了gulp插件。
部署项目一般包括以下步骤：
1、删除上次部署的所有文件；
2、复制文件、网页依赖库、小图标等；
3、压缩、合并脚本文件；
4、压缩样式文件；
5、压缩图片；
6、HTML文件压缩、依赖加载替换；
首先要安装nodejs，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以全局安装cnpm（官方网址：npm.taobao.org；）:
html 代码
npm install cnpm -g --registry=https://registry.npm.taobao.org
全局安装gulp html 代码
cnpm install -g gulp
新建package.json文件 html 代码
npm init
package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
json 代码
{
"name": "gulp-demo", //项目名称（必须）
"version": "1.0.0", //项目版本（必须）
"description": "This is for study gulp project !", //项目描述（必须）
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://xxxx"
},
"author": { //项目作者信息
"name": "shana",
"email": "shana_fang@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-sass": "^3.0.0"
}
}
进入项目目录安装gulp插件 html 代码
npm install gulp
例如安装sass编译文件： html 代码
cnpm install gulp-sass --save-dev
新建gulpfile.js文件（重要） javascript 代码
/*gulp配置文件*/
var VERSION = 'v_1_0';
var DATE = new Date().getTime();
var gulp = require('gulp'),
//清除文件
del = require('del'),
//复制文件
copy = require('copy'),
//js压缩插件
uglify = require('gulp-uglify'),
//合并文件
concat = require('gulp-concat'),
//压缩css
minifyCSS = require('gulp-minify-css'),
miniSass = require('gulp-sass');
//压缩图片
imagemin = require('gulp-imagemin'),
//压缩html
htmlmin = require('gulp-htmlmin'),
//html文件对合并后的替换处理插件
htmlReplace = require('gulp-html-replace');
//1.清除旧部署的文件
gulp.task('clean',function(cb){
del(['dest/*']);
cb();
});
//2.拷贝文件
gulp.task('copy',function(){
//copy('font/*','dest/font/',cb);
gulp.src(['js/bootstrap.min.js','js/ie10-viewport-bug-workaround.js','js/jquery-1.11.3.min.js','js/jquery.easing.min.js','js/jQueryRotate.2.2.js'])
.pipe(gulp.dest('dest/js/'));
gulp.src(['font/*'])
.pipe(gulp.dest('dest/font/'));
});
//3.压缩合并脚本文件
gulp.task('uglify',function(){
gulp.src(['js/index.js'])
.pipe(uglify())
.pipe(concat('index.'+VERSION+'t'+DATE+'.js'))
.pipe(gulp.dest('dest/js/'));
});
//4.压缩合并css文件
gulp.task('cssmin',function(){
gulp.src(['css/*.css'])
.pipe(minifyCSS())
.pipe(concat('index.'+VERSION+'t'+DATE+'.css'))
.pipe(gulp.dest('dest/css/'));
});
gulp.task('sass', function () {
return gulp.src('sass/*.scss')
.pipe(miniSass().on('error', miniSass.logError))
.pipe(gulp.dest('dest/css/'));
});
gulp.task('sass:watch', function () {
gulp.watch('sass/*.scss', ['sass']);
});
//5.压缩图片
gulp.task('imagemin',function(){
gulp.src('img/**/*.{png,jpg,jpeg,gif,webp.svg}')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dest/img/'));
});
//6.替换html中调用的js和css，并压缩html
gulp.task('htmlmin',function(){
var option = {
//压缩html
collapseWhitespace: true,
//省略布尔值
collapseBooleanAttributes: false,
//删除所有空格属性值
removeEmptyAttributes: false,
//删除script的type属性
removeScriptTypeAttributes: true,
//删除css的type属性值
removeStyleLinkTypeAttributes: true,
//压缩页面js
minifyJS: true,
//压缩页面css
minifyCSS: true
};
gulp.src('index.html')
.pipe(htmlReplace({
'indexjs': 'js/index.'+VERSION+'t'+DATE+'.js',
'indexcss': 'css/index.'+VERSION+'t'+DATE+'.css'
}))
.pipe(htmlmin(option))
.pipe(gulp.dest('dest/'));
});
//默认任务组合
gulp.task('default',['clean'],function(){
gulp.start('copy','uglify','cssmin','imagemin','htmlmin');
});
html 代码
<!-- build:indexcss -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- endbuild -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 旋转插件 -->
<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!-- build:indexjs -->
<script src="js/index.js"></script>
<!-- endbuild -->
通过执行以下命令： html 代码
gulp default // 执行默认任务 或 用“ gulp ”
注：将需要用到的依赖库都要进行安装，如js压缩：gulp-uglify，要用“cnpm install gulp-uglify”进行安装才能使用。
捕获一篇好文： zhuanlan.zhihu.com/p/20309820grunt vs gulp
