前端构建工具gulp使用

     在接触了grunt之后，又发现了gulp，也是前端自动化构建工具；饱受好评的是gulp的管道概念。

    安装方式基于npm；全局安装：

npm  install -g gulp

    你也可以安装在你的项目里面：

npm  install --sava-dev gulp

     和grunt一样，我们需要在包跟目录下建立一个gulpfile.js文件；首先引入gulp和相关组件：

var gulp = require('gulp');

var uglify = require('gulp-uglify'), // js压缩
	jshint = require('gulp-jshint'), // js压缩
	minifycss = require('gulp-minify-css'), // CSS压缩
	concat = require('gulp-concat'), // CSS压缩
	rename = require('gulp-rename'); // 重命名

     为每个组件分配任务：

//压缩js
gulp.task('javascripts', function () {
	gulp.src('js/newtest.js')
		.pipe(uglify())
		.pipe(gulp.dest('dest-js/'));
});

     .src为需要操作文件的地址；.pipe是进行的操作，这里uglify()是对js进行压缩，.dest是对处理过后的文件进行投放（指定位置）；
     最后我们需要给gulp绑定默认执行动作；这样执行gulp命令的时候就会自动执行绑定的任务；

// 定义develop任务在日常开发中使用
gulp.task('develop', function () {
	//  gulp.run('buildlib','build-less','javascripts','stylesheets');
	gulp.run('javascripts', "jshint");
	//  gulp.watch('./javis/static/less/*.less', ['build-less']);
});

gulp.task('default', function () {
	gulp.run('develop');
});

    此时，去安装我们gulp插件，并执行gulp：

npm  install gulp-uglify  --sava-dev

gulp

目标文件夹如约出现了经过压缩过的文件：

原文件内容：

这里注意，局部变量如果没有使用的话，压缩会自动忽略；原文件中的test  和 tests函数目标文件中不见了，取消注释console.log（test）重新压缩，会发现test函数被压缩了；

还在深入学习中，参考链接：gulp中文网