标签（空格分隔）： gulp 自动化构建

---

序：

随着互联网的飞速发展智能设备的普及，浏览器侵占的市场更加巨大，导致前端行业有了一个质的飞跃，项目越来越大越来越复杂，带来一些列管理维护优化团队多人协作等问题要思考，于是自动化构建出现了。

gulp简介

常见的自动化构建工具有grunt、gulp、webpack。其中grunt对于新人入门可能不太好学吧。一般gulp可以和ng配合使用，webpack可以和vue配合 。

gulp基础环境搭建：

1. 在本地某处新建项目文件夹，命名为webProject，表示项目。进入文件夹后使用git bash here 在控制台输入npm init初始化，创建package.json配置文件。填写项目的相关信息，或者你不想写，一路回车也行，直至项目根目录生成package.json文件，表示初始化完成。

ps: package.json文件为本项目配置文件。

2. 局部安装gulp，输入npm install gulp --save-dev安装项目开发依赖包gulp，安装完成后项目根目录出现node_modules文件夹。

ps:
--save表示写入配置文件即package.json文件中，
-dev表示只在开发阶段依赖。

输入gulp -v检查是否安装成功。

ps:出现版本号表示安装成功。

3. 此时在项目根目录新建文件gulpfile.js，注意文件名为固定，不能随意修改。此时项目根目录的情况是这样的：

基础环境搭建完成了。

gulp相关插件使用

接下来主要是建立src源码目录， 配置gulpfile.js，即使用gulp的相关模块插件。

1. 根目录下创建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)等。

2. 配置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前进的动力--------------------------------------