使用gulp构建工具

之前一个demo中用的是grunt，照着grunt用到的插件找了下gulp的，总体使用还算顺畅，说实话并不觉得学习成本有降低什么的，差不多。不过也遇到一些问题：

1、gulp.dest()输出目录需要用"./"而不能"/"

2、gulp的jshint有些规则检测不到，而grunt却检测到了，可以用"asi": true测试下。（据说现在大家都用eslint代替jslint，看了下有eslint180条左右的规则，吓cry了好么。）

3、gulp任务有些执行完毕后不会有消息提示，而grunt的插件就友好很多。

gulp.task('uglify', ['jshint'], function() {//...}

package.json

{
"name": "vip.uc108",
"version": "0.1.0",
"devDependencies": {
"del": "^1.2.0",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-csscomb": "^3.0.6",
"gulp-eslint": "^1.0.0",
"gulp-file-include": "^0.13.7",
"gulp-imagemin": "^2.3.0",
"gulp-jshint": "^1.11.2",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.2.0",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^1.0.5",
"gulp-uglify": "^1.2.0"
}
}

gulpFile.js

var gulp = require('gulp');

var sass = require('gulp-ruby-sass');
var csscomb = require('gulp-csscomb');
var fileinclude = require('gulp-file-include');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var livereload = require('gulp-livereload');
var cssmin = require('gulp-minify-css');
var notify = require('gulp-notify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('sass', function() {
return sass('./static/introduce/scss', {
style: "compressed"
})
.on('error', function(err) {
console.error('Error!', err.message);
}).pipe(gulp.dest('./static/introduce/css'))
.pipe(livereload({
start: true
}));
});

gulp.task('css', function() {
return gulp.src(['./static/activity/**/*.css', '!./static/activity/**/*min.css'])
.pipe(csscomb()).
pipe(cssmin()).
pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest('./static/activity'))
.pipe(livereload({
start: true
}));
});

gulp.task('image', function() {
gulp.src('static/activity/index/img/*')
.pipe(imagemin())
.pipe(gulp.dest('./static/activity/index/img'));
});

gulp.task('jshint', function() {
return gulp.src(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'])
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'));
});

gulp.task('uglify', ['jshint'], function() {
return gulp.src(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'])
.pipe(uglify({
ext: ".min.js"
}))
.pipe(rename(function(path) {
path.basename += ".min";
}))
.pipe(gulp.dest('./static/activity/'));
})

gulp.task('fileinclude', function() {
return gulp.src('src/html/**/*.html').
pipe(fileinclude({
prefix: '@@',
basepath: '@file'
})).pipe(gulp.dest('./view'));
});

gulp.task('watch', function() {
gulp.watch(['./static/activity/**/*.js', '!./static/activity/**/*.min.js'], ['uglify']);
});

gulp.task('default', ['image', 'fileinclude'], function() {
gulp.src('package.json').pipe(notify("default finished"));
});

关于gulp插件，有空再试下这些~~

gulp-rev

gulp-concat

gulp-sourcemaps

gulp-connect