构建工具-gulp

前言

构建工具可以帮助我们做很多的事情，比如拼写检查，合并代码，压缩代码等等工作，对我们提高开发效率有很大的帮助。gulp作为一款出色的构建工具，值得我们学习。

正文

一、gulp.task

gulp是基于task运行的

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

name是任务的名称
fn定义任务要执行的一些操作

二、gulp.src

指定要处理的源文件的路径

gulp.src(globs[, options])

globs代表了需要处理的文件的源路径，可以是string或者Arraystring.

gulp.src([])
  .pipe()
  .pipe()
  .
  .

三、 gulp.dest

定义处理后文件的输出位置

gulp.dest(path[, options])

四、gulp.watch

用于监听文件的变化

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

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

//文件发生改变后执行tasks

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

//文件发生改变后执行回调cb

实例

考虑如下场景：有一半透明小方块，点击时透明度变为0；鼠标按下时可以拖动；鼠标悬浮其上并滚动鼠标滑轮介意改变其大小。以上功能分别由三个人开发，利用requirejs实现模块化。

目录结构如下：

project   目录

|-modules
| |-main.js
| |-show.js
| |-drag.js
| |-scale.js
|-lib
| |-require.js
| |-jquery.min.js
|-bulid
|-index.html
|-gulpfile.js
|-package.json

使用模块化开发可以很大程度提高团队效率，但是有一个很大的弊端：产生了大量的http请求

使用gulp完成两个功能：

1. 合并js文件
2. 监听文件的变化，执行自动合并文件且自动刷新浏览器

主要用到amd-optimize、gulp-concat、browser-sync这三个插件

//载入依赖模块
var gulp = require("gulp");  
var amdOptimize = require("amd-optimize");  
var concat = require('gulp-concat');  
var browserSync = require('browser-sync').create();

//合并js文件
gulp.task("index", function () {  
  return gulp.src("modules/*.js")   
    .pipe(amdOptimize("main",{
        paths : {
            'jquery.min' : 'lib/jquery.min' 
        },
        shim : {
            'jquery.min' : {
                exports : '$'  
            }
        }
    }))    
    .pipe(concat("index.js"))      
    .pipe(gulp.dest("bulid"));  
})

//监听文件变化并自动合并文件
gulp.task('watch1', function () {
    gulp.watch('modules/*.js', ['index']);
})

//自动刷新浏览器
gulp.task('serve', function () {
    browserSync.init({
        proxy: "http://localhost"
    });
    gulp.watch('bulid/*.js').on('change', browserSync.reload);
})

gulp.task('default',['index','watch1','serve']);

完整代码可点击这里