构建工具：gulp（基础配置）

这两天看着视频，跟着一个老司机在做一个基于angular框架的webapp，老司机用的构建工具是gulp，

虽然他不反对用webpack，但是我也想接触一下gulp，就被他带上车了，也写这篇文来记录一下我的过程吧

 

我也是初次接触gulp，之前用过webpack，下面就从项目里安装好gulp插件开始写吧

除了安装gulp还需要安装以下常用的插件（都是我这个项目里所要用到的）

 

然后本项目的包管理器是bower，所以下面也会出现从bower的文件目录下拷贝模块的情况

在此再解释一下我的项目文件结构是如何安排的

'src'文件夹用于存放源码，'build'文件夹用于存放开发环境的目录，'build'文件夹用于存放生产环境的目录

 

好了，然后进入重点，开始配置gulp，

在项目目录下创建一个js文件，名叫gulpfile.js，然后进入编辑，下面就是以代码+注释的形式去介绍具体配置了

 

// 配置gulp
var gulp = require('gulp');//最重要的模块引入
//引入这个模块的目的：简化输入插件前缀的操作
var $ = require('gulp-load-plugins')();//注意：需要实例化（）
var open = require('open');

// 封装一个对象来简化路径输入
var app = {
    srcPath : 'src/',
    devPath : 'build/',
    prdPath : 'dist/'
};

// 开始定义任务

// 拷贝bower里的文件到开发目录和生产目录中
gulp.task('lib',function(){//定义任务的api叫task
    // 在回调函数中写逻辑
    gulp.src('bower_components/**/*.js')//深度遍历文件
    // 使用链式操作，用dest方法去拷贝
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    // 通知服务器来刷新游览器
    .pipe($.connect.reload());
});

// 拷贝src里的文件到开发目录和生产目录中
gulp.task('html',function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
});

// 拷贝data里的json(假数据)到开发目录和生产目录中
gulp.task('json',function(){
    gulp.src(app.srcPath + 'data/**/*.json')
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    .pipe($.connect.reload());
});

gulp.task('less',function(){
    gulp.src(app.srcPath + 'style/index.less')
    // 进行编译
    .pipe($.less())
    // 编译完成后放入开发目录
    .pipe(gulp.dest(app.devPath + 'css'))
    // 进行压缩
    .pipe($.cssmin())
    // 完成后放入生产环境
    .pipe(gulp.dest(app.prdPath + 'css'))
    .pipe($.connect.reload());
});

gulp.task('js',function(){
    gulp.src(app.srcPath + 'script/**/*.js')
    // 进行合并，合并到index.js
    .pipe($.concat('index.js'))
    // 完成后放入开发目录
    .pipe(gulp.dest(app.devPath + 'js'))
    // 进行压缩
    .pipe($.uglify())
    // 完成后放入生产环境
    .pipe(gulp.dest(app.prdPath + 'js'))
    .pipe($.connect.reload());
});

gulp.task('image',function(){
    gulp.src(app.srcPath + 'image/**/*')
    .pipe(gulp.dest(app.devPath + 'image'))
    // 进行压缩
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'image'))
    .pipe($.connect.reload());
});

// 定义一个总任务，去完成项目的打包
gulp.task('build',['image','js','less','lib','html','json']);

// 定义一个删除开发目录和生产目录的任务
gulp.task('clean', function(){
    gulp.src([app.prdPath,app.devPath])
    .pipe($.clean());
});

// 定义一个启动服务器的任务
gulp.task('serve',['build'],function() {
    $.connect.server({
        // 定义路径
        root : [app.devPath],
        // 是否随着保存变更文件而自动刷新
        livereload : true,//不支持老IE
        // 定义端口
        port : 1234
    });
    // 自动打开网址
    open('http://localhost:1234');

    // 监控原路径的文件，为了达到修改原文件就会自动执行对应的构建任务的目的
    gulp.watch('bower_components/**/*', ['lib']);
      gulp.watch(app.srcPath + '**/*.html', ['html']);
      gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
      gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
      gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
      gulp.watch(app.srcPath + 'image/**/*', ['image']);
});

// 定义一个默认的任务，在控制台输入gulp就会自动执行serve任务
gulp.task('default',['serve']);

OK了，这时候在控制台输入gulp就会弹出游览器，地址就是本地的服务器+定义端口，并会随着源代码的修改而自动刷新，就像webpack-server一样。

最后再说一下需要注意的：

1.这个本地服务器自动刷新功能是不支持老IE的

2在启动本地服务器后如果要在控制台退出，可以输入control+c(同webpack-server)