DoraCMS

您现在的位置是:首页>文档内容页

文档详情

DoraCMS的静态文件压缩

doramart 2015-11-09 09:06:33 原创教程225559
前一段时间看了桑大的gulp教程,对gulpjs有了初步的了解,入门比较容易,下面简要介绍一下gulp:简单的讲,gulp是一个构建工具,一个streaming构建工具,一个nodejs写的构建工具

前一段时间看了桑大的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文件夹下:


DoraCMS静态文件压缩.jpg


经常变化的是 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

DoraCMS静态文件压缩1.jpg



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


文章评论

Cancel the reply
Login Participate In Comments

Review(