介绍下最近对gulp的一些使用

img

gulp安装到全局：

	sudo npm install gulp -g —versose

安装完了gulp还要记得进入相应目录下执行这个命令

	npm install --save -dev

把package.json里的包都安装一下，因为里面可能会有些gulp运行需要依赖的包，当然前提是拉了别人的package.json这个文件的代码。

如果执行gulp的时候还提示commond not found可以再全局安装一下gulp，当时安装时有两次都是这种情况，可能包的安装顺序有关。

在项目根目录下创建一个名为 gulpfile.js 的文件：

	var gulp = require('gulp');

	gulp.task('default', function() {
	    //将你的默认的任务代码放在这
	});

下面是js和css压缩的一个配置：

	gulp.task('js_daka', function () {
        return gulp.src('./src/nishidaka/static/js/index.js')
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
	});

	gulp.task('js_nishidaka', function () {
        return gulp.src('./src/nishidaka/static/js/index.js')
        .pipe(uglify())//压缩js文件
        .pipe(rename('index.min.js')) //重命名
        .pipe(gulp.dest('./src/nishidaka/static/js'))//目标文件夹
	});

	gulp.task('css_nishidaka', function () {
        return gulp.src(['./src/nishidaka/static/css/base.css', './src/nishidaka/static/css/index.css'])
        .pipe(concat('all.css'))//如果有多个文件的话先合起来再进行压缩
        .pipe(minifyCss())
        .pipe(rename('index.min.css'))
        .pipe(gulp.dest('./src/nishidaka/static/css'))
	});

	gulp.task('nishidaka_index', ['js_daka', 'css_nishidaka', 'js_nishidaka']);

第一段代码中jshint()是代码验证工具，这种工具可以检查你的代码并提供相关的代码改进意见，结果一检查就检查出代码里写的不规范的地方，一个是重复定义了一个变量，还有就是分号有些地方没有加上。确实说这个对代码规范还是很有用的。

配置好后跑一遍：从终端里进入项目目录，执行gulp nishidaka_index

这里还有一个小插曲，开始使用的CSS压缩插件是csso,可是显示效果有所偏差，后来改用minifyCss压缩就正常了，查看压缩后的文件原来是压缩的时候有bug，压缩后的css位置改变不正确导致的样式错乱。

gulp的其他使用后续用到的时候再介绍下。

官网上还有些使用技巧