前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。

1. 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:

	npm install -g gulp

2. 创建本地项目:

	npm init

初始化的时候要求你输入一些值，不输的直接回车即可，点击y之后在根目录自动创建了一个package.json文件，这个文件用来存放即将安装的插件name和version，这个文件有什么用呢？当我们把项目拷贝给别人的时候不需要拷贝插件，只需要把项目文件、package.json和gulp.file.js拷贝过去就可以，接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。

3. 设计项目目录索引结构

└── src/
    ├── less/    *.less 文件
    ├── sass/    *.scss *.sass 文件
    ├── css/     *.css  文件
    ├── js/      *.js 文件
    ├── fonts/   字体文件
    └── images/   图片
└── dist/

4. 安装各种插件

npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev

注意：这里只安装了部分插件

gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩，不会全部压缩（获取改变的文件的src和dest路径）
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch，使用 gulp-watch-path 配合stream-combiner2 可避免这种情况

–save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内，插件全部安装完之后package.json的变化为：

5. gulp如何使用
   控制台输入gulp的时候首先找寻gulpfile.js文件，在找寻default任务，所以我们应该手动新建一个名为gulpfile.js的js文件，将任务写在里面。具体文件目录为：

   gulp一共五中方法：
   gulp.task()——新建任务
   gulp.src()——获取文件源地址
   gulp.dest()——文件输出地址
   gulp.run()——运行任务
   gulp.watch()——监听文件修改
   

6. 编写gulpfile.js文件

	var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    minifycss = require('gulp-minify-css'),
    imgmin = require('gulp-imagemin'),
    gutil = require('gulp-util'),
    watchPath = require('gulp-watch-path'),
    combiner = require('stream-combiner2');
    
    //新建代码着色与显示错误日志方法，这个方法用到了gulp-util和stream-combiner2插件
    var handleError=function(err){
	    console.log('\n');
	    gutil.log('fileName: '+gutil.colors.red(err.fileName));
	    gutil.log('lineNumber: '+gutil.colors.red(err.lineNumber));
	    gutil.log('message: ' + err.message);
	    gutil.log('plugin: ' + gutil.colors.yellow(err.plugin));
	};

	//新建js批量压缩任务
	gulp.task('script',function(){//script时自定义的
	//将文件的源路径和发布路径赋值给相应变量
	    var srcJsPath='js/*.js';
	    var destJsPath='dist/js/';
	    var combined = combiner.obj([
	            gulp.src(srcJsPath),//获取文件源地址
	            uglify(),//执行压缩
	            gulp.dest(destJsPath);//将压缩的文件发布到新路径
	        ]);
	    combined.on('error', handleError);//打印错误日志
	});

	/*这种写法需要css目录下有很多css文件，只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍，为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件*/
	gulp.task('watchjs',function(){
	    gulp.watch('js/*.js',function(event){
	    var paths=watchPath(event,'js/','dist/js/');
	        //打印修改类型和路径
	        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
	        gutil.log('Dist: ' + paths.distPath);
	        //获取错误信息，继续执行代码
	        var combined = combiner.obj([
	                gulp.src(paths.srcPath),
	                uglify(),
	                gulp.dest(paths.distDir)
	            ]);
	        combined.on('error', handleError);
	    });
	});

	/*编写default任务和监听任务*/
	/*/新建批量任务还是监听修改任务根据项目中实际需要去写，等我们写好很多任务之后就需要写入default中，default写好之后只需要在dos窗口写入gulp就可以自动执行任务*/

	gulp.task('default',function(){
	    //默认执行的方法，引号内的内容对应上面task写的内容
	    gulp.run('watchjs','css','images');
	    //监控js
	    gulp.watch('js/*.js',['watchjs']);
	    //监控css
	    gulp.watch('css/*.css',['css']);
	    //监控img
	    gulp.watch('images/*.*',['images']);
	});

如对gulp还有什么不明白之处，或者本文有什么遗漏或错误，欢迎一起交流和探讨~