标签（空格分隔）： 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写代码自动保存频率略高，有的有卡顿。

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/1e1b89ff7076

gulp自动化构建项目——环境搭建+自动化部署

序：

gulp简介

gulp基础环境搭建：

gulp相关插件使用