js,css 自动化构建工具gulp初探

今天，在网上发现一个有意思的东东，gulp，一个自动化构建工具，可以用来快速压缩js，css文件。

官网地址：http://www.gulpjs.com.cn/

1. 这个工具是基于node.js的，所以我们需要先安装node.js运行环境，去官网下载安装程序，https://nodejs.org，根据自己的操作系统选择安装包下载。具体怎么安装，这里就不怎么赘述了，网上一搜一大把的。
2. 安装好node.js后，打开node.js的命令行工具
3. 安装gulp组件，命令： npm install global gulp
4. 进入项目所在的目录，通过cd命令
5. 在项目所在的目录中安装gulp环境 npm install gulp --save-dev

6. 安装压缩js,css需要的插件，

      npm install gulp-minify-css
   

      gulp-concat gulp-uglify
   

      gulp-rename

7. 在项目根目录下创建gulpfile.js文件， 文件内容如下

var gulp = require('gulp');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var fs=require("fs");
var path=require("path");

var dest='bulid\\';
var jsDest=dest+'js\\';
var cssDest=dest+'css\\';
//读取文件夹中的文件到数组中，支持递归读取
var readfile=function(p,fslist){
	var stats=fs.statSync(p);
	//当前路径是文件
	if(stats.isFile()){
		fslist.push(p);
		
	}
	//当前路径是文件夹 递归读取子文件夹
	else{
		var list= fs.readdirSync(p);
		for(var i=0;i<list.length;i++){
			readfile(p+"\\"+list[i],fslist);
		}
	}
}

//清空编译文件夹下的文件
var clear=function(p){
	fs.readdir(p, function(e,files){
		if(files==undefined) return;
		for(var i=0;i<files.length;i++){
			var stats=fs.statSync(p+"\\"+files[i]);
			//当前路径是文件
			if(stats.isFile()){
				fs.unlink(p+"\\"+files[i]);
			}
			//当前路径是文件夹 删除子文件夹
			else{
				fs.rmdir(p+"\\"+files[i]);
			}
		}
	});


}
/*
gulp.watch('*.js',function(e){
	console.log(e.type);
	if(e.type=="added"||e.type=="changed"){
		gulp.src(e.path)
		.pipe(uglify())
		.pipe(rename({ extname: '.min.js' }))
		.pipe(gulp.dest("dest/"));
	}
	else if(e.type=="deleted"){
		var p=e.path;
		var b=p.substr(0,p.lastIndexOf('\\'));
		console.log(b);
		var d=b+"\\dest\\"+p.substr(p.lastIndexOf('\\')+1);
		var d2=b+"\\dest\\"+p.substring(p.lastIndexOf('\\')+1,p.lastIndexOf('.'))+".min.js";
		
	}
});*/

gulp.task('default',function(){
	gulp.start(['script','css']);
});
gulp.task('script', function() {
	//清空压缩文件夹下的文件
	clear(jsDest);
	//读取文件
	var filelist=new Array();
	readfile(__dirname+"\\js\\",filelist);
	//压缩js文件
	for(var i=0;i<filelist.length;i++){
		var ext=path.extname(filelist[i]);
		if(ext==".js"){
			gulp.src(filelist[i])
			.pipe(uglify())
			.pipe(rename({ extname: '.min.js' }))
			.pipe(gulp.dest(jsDest));
		}
	}
});


gulp.task('css', function() {
	//清空压缩文件夹下的文件
	clear(cssDest);
	//读取文件
	var filelist=new Array();
	readfile(__dirname+"\\css\\",filelist);
	//压缩css文件
	for(var i=0;i<filelist.length;i++){
		var ext=path.extname(filelist[i]);
		if(ext==".css"){
			gulp.src(filelist[i])
			.pipe(minify())
			.pipe(rename({ extname: '.min.css' }))
			.pipe(gulp.dest(cssDest));
		}
	}
});