gulp——打造一个简单的前端自动化项目

先说说一些题外话，之前是完全没有使用自动化构建工具的经验，
现在webpack和gulp都会学习。
做个记录，也做个笔记。
那么常问的gulp和webpack各自的区别和使用场景又是什么呢？
记得在知乎看到一句很概括的话是：
gulp 是 task runner，Webpack 是 module bundler。

入门

首先，根据官网（[http://www.gulpjs.com.cn/]）提供入门指南，创建一个空白的gulpfile。

全局安装gulp以及安装save-dev gulp做开发依赖模块。

npm install –global gulp
npm install –save-dev gulp

之后查看版本

然后就是在项目根目录建立gulpfile.js
直接运行gulp就好了。

任务

现在，我们就可以开始来建立我们的任务了。
做文件相关的任务，在之前已经提前建立好了文件夹：

其中server是放node-modules和dao.js的，然后images和plugins就不说了，主要是建立了一个src源文件夹，源代码们就可以放心大胆的往里面扔了，或者用less，sass的孩子们，可以用gulp-sass或者gulp-less
编译一下，当然，是需要先安装和引入的。任务中编写从src编译css预编译文件到目标文件夹dist的css文件夹中。

gulp.task('styles',function(){
        gulp.src('./src/sass/*.scss')
            .pipe(sass())
            .pipe(gulp.dest('./dist/css'))
    })

这里我是没有使用sass和less的，所以就没有引入他们，直接拷贝了css文件：

gulp.task('styles',function(){
    gulp.src('./src/css/*.css')
    .pipe(gulp.dest('./dist/css'))
});

这里用gulp styles命令执行一下

执行完毕，css文件已经拷贝过来了，然后就是依次将js，html都用此方法做一个拷贝，对于 coffee 和 jade 文件，也各自建立各自的任务就好啦٩(๑>◡<๑)۶

然后呢，在同步中，添加了clean的方法，将旧的编译文件删掉，再copy新的，

gulp.task('clean',function(cb){
    return del(['./dist'],cb);
});

然后将所有的任务添加进gulp的default任务里

gulp.task('default',['clean'],function(){
    gulp.start('styles','scripts','views');
});

都是可以的。

这里再gulp一下，就可以清晰的看到执行步骤啦~٩(๑>◡<๑)۶

然后添加一个watch来自动编译：

gulp.task('watch',function(){
    gulp.watch('./src/css/*.css',['styles']);
    gulp.watch('./src/js/*.js',['scripts']);
    gulp.watch('./src/*.html',['views']);
});

此时执行gulp watch开启监听程序（这里我使用的退出监听一般是ctrl+c来退出(ಥ﹏ಥ)）
在我们有修改之后，就会自动执行编译的程序啦

在成功自动编译之后，我们还需要自动刷新同步到浏览器的界面上。
先安装上gulp-connect

npm install gulp-connect

然后添加建立连接的任务

gulp.task('connect', function () {
    connect.server({
        livereload: true
    });
});

这里我建立了一个最简单的，server的项都是可以配置的。然后将他也添加到default里，另外在其他的编译方法里添加上服务器同步。

gulp.task('default',['clean'],function(){
    gulp.start('styles','scripts','views','watch','connect');
});

gulp.task('styles',function(){
    gulp.src('./src/css/*.css')
    .pipe(gulp.dest('./dist/css'))
    .pipe(connect.reload());
});

最简单使用的gulp构建的自动化项目大体就完成了，执行gulp之后：

可以看到建立的websocket连接发起端口默认的是35729，server端口是8080.

在网页里，也可以清楚的看到连接已经建立起来了。

而此时，在html，css，js里做修改，livereload会推送到界面，并且执行自动刷新。

以上です。