gulp常用依赖

先来看看用到的几个依赖

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    handlebars = require('gulp-handlebars'),
    wrap = require('gulp-wrap'),
    declare = require('gulp-declare'),
    concat = require('gulp-concat'),
    defineModule = require('gulp-define-module'),
    rename = require('gulp-rename'),
    watch = require('gulp-watch'),
    autoprefixer = require('gulp-autoprefixer'),
    fileinclude = require('gulp-file-include'),
    path = require('path'),
    fs = require('fs');

gulp-uglify

用于压缩文件，主要用于压缩js

gulp.src(['static/js/common/**/*.js','components/common/**/*.js','components/'+dir+'/**/*.js','static/js/'+dir+'/**/*.js'])
                .pipe(concat(dir+'.js'))
                .pipe(uglify())
                .pipe(gulp.dest('../WebRoot/js/pa/'));

上述代码，将数组内的js合并成一个js，并且用uglify()进行压缩，最后dest写入到指定文件目录。

再来看段代码

gulp.src(['components/common/**/*.hbs','components/'+dir+'/**/*.hbs'])
                .pipe(handlebars({
                    handlebars: require('handlebars')
                }))
                .pipe(wrap('Handlebars.template(<%= contents %>)'))
                .pipe(declare({
                    namespace: 'ZGXYClode.templates',
                    noRedeclare: true // Avoid duplicate declarations
                }))
                .pipe(concat(dir+'.js'))
                .pipe(gulp.dest('../WebRoot/js/templates/'));

gulp-handlebars

handlebars是一个模版引擎库， ember.js用它作为前端的模版引擎。
gulp-handlebars编译handlebars文件。

gulp-wrap

可以帮助我们定义使用公共的头部和底部

gulp-declare

安全的声明命名空间，设置属性。

gulp-concat

合并js

gulp-rename

改变管道中的文件名。

gulp-watch

监控文件。当监控的文件有所改变时执行特定的任务。

gulp.task('watch',function(){
    gulp.watch(['components/**/*.html','views/**/*.html','components/**/*.hbs'],['templates']);
    gulp.watch(['static/js/**/*.js','components/**/*.js'],['minify-js']);
});

gulp-autoprefixer

解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。

gulp.task('minify-css', function () {
    gulp.src('./static/css/*.css')
        .pipe(watch('static/css/*.css',function(event){
            watchLog(event);
        }))
        .pipe(autoprefixer())
        .pipe(gulp.dest('../WebRoot/css/pa'));
});

gulp-file-include

用于引入公共文件

gulp.src('views/**/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('../WebRoot/'));