用gulp构建一个简单经常使用的的环境

gulp做为一个自动化构建工具，在前端开发中大大的提升了开发效率，前端开发者们能够利用他减小许多繁复无脑的操做。
这里简单构建一个小环境，就能够在之后的学习中，直接新建各类test.html测试咱们新学习的知识点啦~
【看不明白的，有疏漏的，欢迎指出，我更改措辞或者bug】

入门安装

入门就不讲了，会用npm的同窗应该都清楚，这里贴一个既有的官方指南。gulp入门指南

一些小基础

详细的配置我就不讲了，api文档戳进去看。简单作点通俗的讲解。

gulp.task(name[, deps], fn)

gulp是由每一个小task组成的，咱们能够相似函数同样，把咱们须要的一个个小功能以各类task分开写，而后能够在cmd里使用gulp <task> <othertask> 方式来执行。

固然任务多了，咱们就须要一键执行全部操做，因此通常状况下，咱们只运行 gulp 命令，则会执行所注册的名为 default 的 task，而后在default这个任务后面，添加咱们写好的其它task名的数组，则会挨个执行咱们写好的各类task。否则只执行function。
若是没有default这个 task，那么gulp命令会报错。

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行全部的 task 而且不作任何等待。若是你想要建立一个序列化的 task 队列，并以特定的顺序执行，嗯，戳文档api文档。

gulp.src(globs[, options])

其实说白了就是匹配咱们要处理的文件，src就是路径。

gulp.src('client/templates/*.jade')

*天然是表示任意，所有。
glob 请参考 node-glob 语法 或者，你也能够直接写文件的路径。

gulp.pipe

其实就是把src匹配到的文件传递到后面来执行。括号里就是咱们要进行的各类操做。

有点相似js语法，不难理解，用.接起来，一步步执行。
通常咱们会一行行写，可读性好点，写一行不友好。

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

gulp.dest(path[, options])

生成处理好的文件。
你能够将它 pipe 到多个文件夹。若是某文件夹不存在，将会自动建立它。

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

gulp.watch(glob[, opts], tasks)

监视文件，而且能够在文件发生改动时候作一些事情。

gulp.watch(glob [, opts], tasks) 
或
gulp.watch(glob [, opts, cb])

须要在文件变更后执行的一个或者多个经过 gulp.task() 建立的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

也能够直接执行function，同样的。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp的不少操做都是用插件执行的，固然，详细操做天然是每一个插件看做者文档了！并且同一个功能的插件也层出不穷，你们能够根据须要自行选择。好了，开始咱们的构建，注意，提到的每个插件都要npm安装

注意：每个插件都存在可配置的空间，因此关于最大化利用好每一个插件，也是参照文档来的，这里咱们取一些通用配置，具体视项目状况而定。

开服务，自动刷新

无可厚非，代码实时保存，浏览器实时刷新，是前端最想要的功能，手动刷新浏览器相信是每个前端新手要吐的操做。

开服务

采用gulp-connect插件。
根目录下开启服务，端口号为2323，开启实时刷新，局域网内可用。

var connect = require('gulp-connect');
var serverConfig = {
root: "./",
port: 2323,
livereload: true,
host: '::'
}
gulp.task('server',function(){
    connect.server(serverConfig);
});

配置自动刷新

采用gulp-livereload。
开启刷新，监听html变化，并实时刷新。

var livereload = require('gulp-livereload')
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['*.html'],function(event){
        livereload.changed(event.path);
    })
});

其实到这里，一个微型的服务就搭建起来了，最后别忘了最根本的一句

var gulp = require('gulp');

否则是起不来的。
为了简便，能够在gulpfiles.js里添加一行,

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

直接运行gulp就好,让他们依次执行。

到这里，其实就是一个小规模的调试环境，接下来，让咱们升级一下，开始构造简单的发布环境

压缩html

采用的是gulp-htmlmin插件。
抽取src目录下的全部html文件，导入到htmlmin插件进行处理，并将结果输出到public目录，最后从新刷新已开启的服务。

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
    gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
              removeComments: true
        }))
        .pipe(gulp.dest('public'))
        .pipe(connect.reload());
});

压缩js

采用的是gulp-uglify插件，但同时，咱们也用到了另外一个插件gulp-concat，这个是用来链接各个文件组成一个文件。
抽取src/js下的全部js文件，将其合并，而后压缩，输出到public/js目录，最后服务重载。

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('script',function(){
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify({mangle:false}))
        .pipe(gulp.dest('public/js'))
    .pipe(connect.reload());
});

压缩css

采用的是gulp-cssnano插件。相似js，不解释了。

var cssnano = require('gulp-cssnano');
gulp.task('css',function(){
gulp.src('src/css/*.css')
    .pipe(concat('animate.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('public/css'))
    .pipe(connect.reload());
})

压缩图片

采起的是gulp-smushit插件，相似js，不解释。

var smushit = require('gulp-smushit');
gulp.task('imagemin',function(){
    gulp.src(['src/images/*.png','src/images/*.jpg'])
        .pipe(smushit({
            verbose:true
        }))
        .pipe(gulp.dest('public/images'))
        .pipe(connect.reload());
});

gulp-watch监听文件变更，自动重载

这个gulp-watch在前面有讲到，其实就是开启监听，并从新执行各个html
，js，css，imagemin压缩任务。
相信你们对比前面的gulp-livereload可以看的出来，这里二者是有冲突的，一个只是调试下刷新页面，一个却每次都要压缩。
因此其实实际项目中是不会把压缩任务配置到watch里，会形成资源浪费，你每保存一次，就会压缩。只会在最后调试完成，执行压缩一次。

gulp.task('watch', function () {
  gulp.watch(['src/*.html'], ['html']);
  gulp.watch(['src/js/*.js'], ['script']);
  gulp.watch(['src/css/*.css'], ['css']);
  gulp.watch(['src/images/*.*'], ['imagemin']);
});

作一个min的task就好，只须要gulp min。

gulp.task('min',['html','script','css','imagemin']);