webpack & gulp

webpack是什么

webpack是一个模块加载器兼打包工具。

GULP是什么

gulp 是一个自动任务运行器，它充分借鉴了Unix操作系统的管道思想。

gulpfile.js

gulpfile.js是Gulp的配置文件，下面是一个典型的gulpfile.js文件

var gulp = require("gulp");
var uglify = require("gulp-uglify");

gulp.task('minify', function(){
    
    gulp.src('js/app.js')
        .pipe(uglify())
        .pipe(gulp.dest('build'))
    
});

上面代码中，gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务minify。task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，然后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。

task方法的回调函数使用了两次pipe方法，也就是说做了两种处理。第一种处理是使用gulp-uglify模块，压缩源码；第二种处理是使用gulp模块的dest方法，将上一步的输出写入本地文件，这里是build.js（代码中省略了后缀名js）。

执行minify任务时，就在项目目录中执行下面命令就可以了。

gulp minify

Gulp 模块的方法

src()

gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转化为数据流。参数的写法一般有以下几种写法。

• js/app.js： 指定准确的文件名。
• js/*.js： 某个文件所有后缀名为js的文件。
• js/**/*.js: 某个目录及所有子目录中的所有后缀名为js的文件。
• !js/app.js：除了js/app.js 以外的所有文件。

dest()

dest方法把管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。

gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./build/templates'))
    .pipe(minify())
    .pipe(gulp.dest('./build/minified_templates'));

task()

task方法用于定义具体的任务。它的第一个参数就是任务名，第二个参数就是人物函数。下面是一个简单的任务函数。

gulp.task('greet', function() {

    console.log('hello world');
    
})；

task 方法还可以指定按顺序运行的一组任务。

gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定build任务，它由css、js、imgs三个任务所组成，task方法会并发执行这三个任务。注意，由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正是css任务运行结束。

如果希望各个任务能严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。

gulp.task('css', ['greet'], function () {
    // Deal with CSS here
});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。

如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务。

gulp.task('default', function () {
    // Your default task
});

// 或者

gulp.task('default', ['styles', 'jshint', 'watch']);

watch()

watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

gulp.task('watch', function () {
    gulp.watch('templates/*.tmpl.html', ['build']);
});

上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。

watch方法也可以用回调函数，代替指定的任务。

gulp.watch('templates/*.tmpl.html', function (event) {
    console.log('Event type: ' + event.type);
    console.log('Event path: ' + event.path);
});