标签（空格分隔）： gulp 自动化构建
序：
随着互联网的飞速发展智能设备的普及，浏览器侵占的市场更加巨大，导致前端行业有了一个质的飞跃，项目越来越大越来越复杂，带来一些列管理维护优化团队多人协作等问题要思考，于是自动化构建出现了。
gulp简介
常见的自动化构建工具有grunt、gulp、webpack。其中grunt对于新人入门可能不太好学吧。一般gulp可以和ng配合使用，webpack可以和vue配合 。
gulp基础环境搭建：
- 在本地某处新建项目文件夹，命名为webProject，表示项目。进入文件夹后使用git bash here 在控制台输入npm init初始化，创建package.json配置文件。填写项目的相关信息，或者你不想写，一路回车也行，直至项目根目录生成package.json文件，表示初始化完成。
ps: package.json文件为本项目配置文件。
- 局部安装gulp，输入npm install gulp --save-dev安装项目开发依赖包gulp，安装完成后项目根目录出现node_modules文件夹。
ps:
--save表示写入配置文件即package.json文件中，
-dev表示只在开发阶段依赖。
输入gulp -v检查是否安装成功。
ps:出现版本号表示安装成功。
- 此时在项目根目录新建文件gulpfile.js，注意文件名为固定，不能随意修改。此时项目根目录的情况是这样的：
基础环境搭建完成了。
gulp相关插件使用
接下来主要是建立src源码目录， 配置gulpfile.js，即使用gulp的相关模块插件。
-
根目录下创建src / html文件夹，,在src/ html下面创建index.html文件，现在的结构应该是这样的：
大概需要这几块，
webProject|----- node_modules
|-----src|-----html |-----index.html |-----style |-----index.less |-----js |-----index.js |-----images |-----logo.png
在index.html文件中写入你的html结构，如果你做单页应用程序只需要一个index页面即可，每个以组件视图需要单独封装提取出来，可能再需要一个 view 文件夹。例如：ng项目，，js文件夹里有 入口js、控制器，服务等文件。每一个文件夹下有对应的子集文件夹防止内嵌组建的less/js/html(view)等。
- 配置gulpfile.js
//这里怕每次把路径写错且方便简写，就把路径存储到了一个对象里。
var app = {
srcPath:'src/',
buildPath:'build/',
distPath:'dist/'
}
/*1.引入gulp以及其他插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');
//2 定义任务,实现自动拷贝
gulp.task('lib',function () {
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload())
});
/*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
/*要操作哪些文件 确定源文件地址*/
gulp.src(app.srcPath+'**/*.html') /*src下所有目录下的所有.html文件*/
.pipe(gulp.dest(app.buildPath))
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload())
});
/*3.执行任务 通过命令行。gulp 任务名称*/
/*定义编译less任务 下载对应的插件 gulp-less
* 把less文件转成css放到build
* */
gulp.task('less',function () {
gulp.src(app.srcPath+'style/index.less')
.pipe(less())
.pipe(gulp.dest(app.buildPath+'css/'))
/*经过压缩，放到dist目录当中*/
.pipe(cssmin())
.pipe(gulp.dest(app.distPath+'css/'))
.pipe(connect.reload())
});
/*合并js*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.buildPath+'js/'))
.pipe(uglify())
.pipe(gulp.dest(app.distPath+'js'))
.pipe(connect.reload())
});
/*压缩图片*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});
/*同时执行多个任务*/
gulp.task('build',['less','html','js','image','lib']);
gulp.task('server',['build'],function () {
/*设置服务器*/
connect.server({
root:[app.buildPath],
livereload:true,
//实时热更新，浏览器里打开的是build 目录下的代码文件。方便调试。
port:3000
//端口任意，只要是4位。冲突时改写一次
})
/*监听哪些文件*/
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']);
open('http://localhost:9999');
});
/*定义默认任务*/
gulp.task('default',['server']);
到此，初步的自动化已经实现了，此处实时刷新的效率与电脑配置有关。如果使用webstrom写代码自动保存频率略高，有的有卡顿。
----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------
--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------
