DoraCMS的静态文件压缩

前一段时间看了桑大的gulp教程，对gulpjs有了初步的了解，入门比较容易，下面简要介绍一下gulp：

简单的讲，gulp是一个构建工具，一个streaming构建工具，一个nodejs写的构建工具

总之，它是一个构建工具

那么什么是构建工具呢？

构建工具本质就是为了自动化构建，解放程序员、提供程序员效率的工具

我们来举个例子，最早的make，因为每次都cc编译，太恶心了，而且当文件特别多的时候，编译速度又慢下来，能不能按需编译，增量编译？

make是通过makefile文件来描述源程序之间的相互关系并自动维护编译工作的

例子就不举了，写过c的人多少都知道点

其实编译在每个语言世界里，都是痛，骨子里的风湿一样，于是产生了make类似的东西

    比如java里的ant，c#里的NAnt

    比如ruby里rake

    比如coffeescript里有cake

它们的共同特点

    1)基于task，定义简单

    2)task有串行，并行，作业依赖等控制方式

    3)通过xxxfile来定义task

如此看来，nodejs的构建系统也应该是这样的，可以说gulp是node世界里和上面几个构建工具最像的一个，它们太像了，以至于学习起来特别简单

其实上面还提了一个streaming，是流式的意思，后面讲原理的时候会深入讲解

更具体的内容可以参考桑大的文档，写的非常详细： StuQ-Gulp实战和原理解析

针对DoraCMS的静态资源压缩，我写了几个非常简单的脚本，对前台和后台的css和js进行压缩处理，压缩的好处这里就不多说了，这里看下如何实现：

DoraCMS的静态资源都在public文件夹下：

经常变化的是 javascripts和stylesheets两个文件夹，我们只对这两个文件夹进行压缩处理。

1、全局安装gulp

npm install --global gulp

2、在DoraCMS的package.json下添加下面的依赖：

"del": "^2.0.2",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.1",
"gulp-uglify": "^1.4.2",
"gulp": "^3.9.0"

3、在DoraCMS根目录下执行 npm install 安装这些依赖

4、在DoraCMS根目录下添加gulpfile.js文件，代码如下：

/**
 * Created by Administrator on 2015/10/22.
 */
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var del = require('del');
var path = {
    scripts:['js/dora-angular.js','js/dora.public.js']
};

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


//原量输入所有plugins
gulp.task('plugsjs',function(){
    return gulp.src('public/plugins/**/*.*')
        .pipe(gulp.dest('build/public/plugins'));
});

//原量输入所有ueditor相关文件
gulp.task('ueditor',function(){
    return gulp.src('public/ueditor/**/*.*')
        .pipe(gulp.dest('build/public/ueditor'));
});

//原量输出所有样式文件
gulp.task('stylesheets',function(){
    return gulp.src('public/stylesheets/**/*.*')
        .pipe(gulp.dest('build/public/stylesheets'));
});

//原量输出所有样式文件
gulp.task('javascripts',function(){
    return gulp.src('public/javascripts/**/*.*')
        .pipe(gulp.dest('build/public/javascripts'));
});


//压缩主要js
gulp.task('mainjs',['javascripts'],function(){
    return gulp.src('public/javascripts/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/public/javascripts'));
});



//压缩前端样式
gulp.task('frontstyle',['stylesheets'],function(cb){

    return gulp.src('public/stylesheets/front/css/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('build/public/stylesheets/front/css'));

});

//压缩后台样式
gulp.task('backstyle',['frontstyle'],function(cb){

    gulp.src('public/stylesheets/backstage/css/style.css')
        .pipe(minifycss())
        .pipe(gulp.dest('build/public/stylesheets/backstage/css'));

});

gulp.task('clean', function(cb) {
    return del(['build/public/javascripts','build/public/stylesheets'], cb)
});

5、根目录下执行 gulp

压缩后的文件在build目录下，需要注意的是，压缩操作都在开发环境下，至于生产环境上如何部署，你可以自己根据需要处理。gulp的有很多功能强大的插件，比如文件重命名，添加版本号等。这里只是介绍了一下压缩基本方法，感兴趣的童鞋可以进一步研究一下。