前一段时间看了桑大的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文件,代码如下:
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的有很多功能强大的插件,比如文件重命名,添加版本号等。这里只是介绍了一下压缩基本方法,感兴趣的童鞋可以进一步研究一下。
棒棒哒~~