什么是Gulp？
gulp.js是基于流的自动化构建工具。
前置知识需求：
node.js的一些基础用法
npm的基础用法，如init、install、run等
了解gulp.js的Api（内容很少，掌握五个Api就可以了）
安装gulp的步骤流程：
1、新建项目文件夹（例如D盘下新建hbPage文件夹），启用cmd
2、进入项目文件，全局安装Gulp
npm install -g gulp
3、创建package.json文件，执行下面代码
npm init
4、在目录文件下创建gulpfile.js文件
插件的安装与gulpfile.js文件的配置
下面的文件配置就比较多了，我们来一一进行说明。（所有的配置项都是写在gulpfile.js文件中的）
关于gulp文件配置，因为在打包部署到服务器上线时，为了减少文件大小我们要对文件进行压缩。所以这里涉及到三个压缩插件（js、css、html）
1、js文件压缩（gulp-gulify）
npm install --save-dev gulp-uglify
2、css文件压缩（gulp-clean-css）
npm install --save-dev gulp-clean-css
3、html文件压缩（gulp-minify-html）
npm install --save-dev gulp-minify-html
在编辑页面样式时，我们会用到 less 或者 sass 编译。（我这里使用的是less编译，两个编译文件根据个人喜好只需要使用其中一个即可）
4、less 和 sass 编译（gulp-minify-html）（二者选择安装其一即可）
npm install --save-dev gulp-less
另外还要用到图片压缩插件。
5、图片压缩（gulp-imagemin）
npm install --save-dev gulp-imagemin
在编写代码时为了实现网页自动刷新我们使用 gulp-connect 插件，当前的流行的是前后端分离，所以为了跟后台做对接，实现跨域代理，这里也要使用一个跟 gulp-connect 配套使用的插件 http-proxy-middleware 。
6、网页自动刷新（gulp-connect）
npm install --save-dev gulp-connect
7、跨域代理（http-proxy-middleware）
npm install --save-dev http-proxy-middleware到这里基本上一般项目安装这些插件就可以了，当然还有一些其他的插件我也会在下面整理到，如果你需要用到的话也可以自行安装。
8、重命名（gulp-rename）
npm install --save-dev gulp-rename
9、自动加载插件（gulp-load-plugins）
（然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是 原始插件名去掉gulp-前缀，之后再转换为驼峰命名。）
npm install --save-dev gulp-load-plugins
10、文件合并（gulp-concat）
npm install --save-dev gulp-concat接下来开始讲解gulpfile相关文件的配置
本来只需要在gulpfile.js文件中配置就行，但是实际过程中我们在开发环境中是不需要进行文件的打包。在生产环境中是不需要进行网页自动刷新和跨域代理配置的。所以我们把开发环境和生产环境的配置区分开来，分别写一个配置文件。
讲一下到目前为止项目的目录结构是这样的：
创建gulp的config文件
我们在build文件夹中可以创建一个 gulpfile.config.js 文件，主要用途为保存项目的目录配置，如源文件存放的路径，打包后文件存放的路径等，可以进行灵活配置。同时将Config对应暴露出来供其他文件引用。
gulpfile.config.js
var SRC_DIR = './src/'; // 源文件目录
var DIST_DIR = './dist/'; // 文件处理后存放的目录，也是打包存放文件的目录
var DIST_FILES = DIST_DIR + '**'; // 目标路径下的所有文件
var Config = {
src: SRC_DIR,
dist: DIST_DIR,
dist_files: DIST_FILES,
html: {
src: SRC_DIR + '**/*.html',
dist: DIST_DIR
},
assets: {
src: SRC_DIR + 'assets/**/*', // assets目录：./src/assets
dist: DIST_DIR // assets文件build后存放的目录：./dist/assets
},
css: {
src: SRC_DIR + 'css/**/*.css', // CSS目录：./src/css/
src_min: SRC_DIR + 'css', // CSS压缩文件目录：./src/css/
dist: DIST_DIR + 'css' // CSS文件build后存放的目录：./dist/css
},
less: {
src: SRC_DIR + 'less/**/*.less', // less目录：./src/less/
dist: DIST_DIR + 'css' // less文件生成CSS后存放的目录：./dist/css
},
js: {
src: SRC_DIR + 'js/**/*.js', // JS目录：./src/js/
src_min: SRC_DIR + 'js', // JS目录：./src/js/
dist: DIST_DIR + 'js', // JS文件build后存放的目录：./dist/js
build_name: 'build.js' // 合并后的js的文件名
},
img: {
src: SRC_DIR + 'images/**/*', // images目录：./src/images/
dist: DIST_DIR + 'images' // images文件build后存放的目录：./dist/images
}
};
module.exports = Config;
创建gulp的dev文件
在build文件夹下创建gulpfile.dev.js文件，该文件放置的时开发环境下调用的任务，同时使用gulp-connect实现编写程序的时候浏览器自动刷新的功能。
gulpfile.dev.js
var gulp = require('gulp');
autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀
less = require('gulp-less'); //less编译
rename = require('gulp-rename'); //重命名
concat = require('gulp-concat'); //合并文件
imagemin = require('gulp-imagemin'); //图片压缩
connect = require('gulp-connect'); //浏览器自动刷新
reload = connect.reload; //浏览器自动刷新
proxy = require('http-proxy-middleware'); //跨域代理
var Config = require('./gulpfile.config.js');
//======= gulp dev 开发环境下 ===============
function dev() {
/**
* HTML处理
*/
gulp.task('html:dev', function () {
return gulp.src(Config.html.src).pipe(gulp.dest(Config.html.dist)).pipe(reload());
});
/**
* assets文件夹下的所有文件处理
*/
gulp.task('assets:dev', function () {
return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist)).pipe(reload());
});
/**
* CSS样式处理
*/
gulp.task('css:dev', function () {
return gulp.src(Config.css.src).pipe(gulp.dest(Config.css.dist)).pipe(reload());
});
/**
* less样式处理
*/
gulp.task('less:dev', function () {
return gulp.src(Config.less.src).pipe(less()).pipe(rename({
suffix: '.min'
})).pipe(gulp.dest(Config.css.src_min)).pipe(reload());
});
/**
* js处理
*/
gulp.task('js:dev', function () {
return gulp.src(Config.js.src).pipe(gulp.dest(Config.js.dist)).pipe(reload());
});
/**
* 图片处理
*/
gulp.task('images:dev', function () {
return gulp.src(Config.img.src).pipe(imagemin({
optimizationLevel: 3
, progressive: true
, interlaced: true
})).pipe(gulp.dest(Config.img.dist)).pipe(reload());
});
gulp.task('dev', ['html:dev', 'css:dev', 'less:dev', 'js:dev', 'assets:dev', 'images:dev'], function () {
connect.server({
root: ['./'],
port:8090,
livereload:true,
middleware: function(connect, opt) {
return [
proxy('/hb-controller', {
target: 'http://192.168.1.7:8080',
changeOrigin:true
}),
/*proxy('/hb', {
target: 'http://192.168.0.102:8080/hb-controller',
changeOrigin:true
}),*/
proxy('/otherServer', {
target: 'http://IP:Port',
changeOrigin:true
})
]
}
});
// Watch .html files
gulp.watch(Config.html.src, ['html:dev']);
// Watch .css files
gulp.watch(Config.css.src, ['css:dev']);
// Watch .less files
gulp.watch(Config.less.src, ['less:dev']);
// Watch assets files
gulp.watch(Config.assets.src, ['assets:dev']);
// Watch .js files
gulp.watch(Config.js.src, ['js:dev']);
// Watch image files
gulp.watch(Config.img.src, ['images:dev']);
});
}
//======= gulp dev 开发环境下 ===============
module.exports = dev;在该文件中创建了如html:dev、css:dev、less:dev等几个任务（具体任务实现了什么功能，聪明的你应该看得出来~），这几个任务被放置在dev函数中，并且将dev函数暴露出去。
其中一个主要的gulp任务 dev（同时也是生产环境下没有的gulp任务），开启了一个gulp-connect服务器，同时监听各个资源文件的变化，当文件发生变化后通知浏览器进行重新刷新。 还有一个就是开启了跨域代理服务，方便跟后台做对接。
上面的 connect.server 中 middleware 配置的是代理信息，不懂得可以去查查跨域代理是怎样配置的。
创建gulp的prod文件
在build文件夹下创建gulpfile.prod.js文件，用于放置生产环境下运行的任务。其中在生产环境下，我们并不需要使用到什么浏览器自动刷新的功能，只要进行如压缩CSS、JS文件等操作即可。
gulpfile.prod.js
var gulp = require('gulp');
minifyHtml = require("gulp-minify-html"); // html压缩
autoprefixer = require('gulp-autoprefixer'); // 处理css中浏览器兼容的前缀
rename = require('gulp-rename'); //重命名
cleanCss = require("gulp-clean-css"); // css的层级压缩合并
less = require('gulp-less'); //less编译
uglify = require('gulp-uglify'); //js压缩
concat = require('gulp-concat'); //合并文件
imagemin = require('gulp-imagemin'); //图片压缩
var Config = require('./gulpfile.config.js');
//======= gulp build 打包资源 ===============
function prod() {
/**
* HTML处理
*/
gulp.task('html', function () {
return gulp.src(Config.html.src).pipe(minifyHtml()).pipe(gulp.dest(Config.html.dist));
});
/**
* assets文件夹下的所有文件处理
*/
gulp.task('assets', function () {
return gulp.src(Config.assets.src).pipe(gulp.dest(Config.assets.dist));
});
/**
* CSS样式处理
*/
gulp.task('css', function () {
return gulp.src(Config.css.src).pipe(autoprefixer('last 2 version')).pipe(cleanCss()).pipe(gulp.dest(Config.css.dist));
});
/**
* less样式处理
*/
gulp.task('less', function () {
return gulp.src(Config.less.src).pipe(autoprefixer('last 2 version')).pipe(less()).pipe(gulp.dest(Config.css.dist)).pipe(rename({
suffix: '.min'
})).pipe(cleanCss()).pipe(gulp.dest(Config.css.dist));
});
/**
* js处理
*/
gulp.task('js', function () {
return gulp.src(Config.js.src).pipe(gulp.dest(Config.js.dist)).pipe(rename({
suffix: '.min'
})).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
});
/**
* 合并所有js文件并做压缩处理
*/
gulp.task('js-concat', function () {
return gulp.src(Config.js.src).pipe(concat(Config.js.build_name)).pipe(gulp.dest(Config.js.dist)).pipe(uglify()).pipe(gulp.dest(Config.js.dist));
});
/**
* 图片处理
*/
gulp.task('images', function () {
return gulp.src(Config.img.src).pipe(imagemin({
optimizationLevel: 3
, progressive: true
, interlaced: true
})).pipe(gulp.dest(Config.img.dist));
});
gulp.task('build', ['html', 'css', 'less', 'js', 'assets', 'images']);
}
module.exports = prod;同样在gulpfile.prod.js文件中将所有的任务放置在了prod函数中，同时暴露该函数供外部调用。
调用dev和prod方法
在真正的gulp配置文件gulpfile.js中，引入gulpfile.dev.js和gulpfile.prod.js文件，并调用dev和prod方法，这样对应环境下的各个任务即被创建出来了。
gulpfile.js
var prod = require('./build/gulpfile.prod.js');
var dev = require('./build/gulpfile.dev.js');
prod();
dev();运行gulp
这个时候，我们可以使用gulp dev命令进行开发模式，此时会监听项目src中文件的变化，执行对应的任务，与此同时会通知浏览器进行刷新，及时响应。 而使用gulp build命令则可以针对生产环境的要求打包资源文件，用于生产。
定义脚本scripts
编写 package.json 文件中公的 scripts 。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp dev",
"dev": "gulp dev",
"clean": "rimraf dist",
"build": "rimraf dist && gulp build"
},
其中，主要的有：
1. 定义了start脚本，用于执行gulp dev命令；
2. 定义了dev脚本，同样用于执行gulp dev命令；
3. 定义了clean脚本，用于执行rimraf dist命令（删除dist目录下的所有文件）；
4. 定义了build脚本，用于执行rimraf dist命令，还有gulp build命令，实际上就是先删除dist目录下的所有文件，然后再打包生成各资源文件。
需要rimraf，我们必须先进行全局安装：
npm install rimraf -g
这样我们在实际使用过程中：
1. 使用npm start命令将对应执行gulp dev命令；
2. 使用npm run dev命令将对应执行gulp dev命令；
3. 使用npm run clean命令将删除所有生成后的文件；
4. 使用npm run build命令可以先删除生成后的文件，再重新打包生成。