// 引入 gulp
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var spriter = require("gulp-spriter");
gulp.task('lint', function() {
gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));});
gulp.task('sass', function() {
gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css'));});
gulp.task('scripts', function() {
gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));});
gulp.task("css",["clean"],function(){
return gulp.src("./dist/css/*.css")
.pipe(spriter({
sprite: "test.png",
slice:"./src/img",
outpath:"./dist/img"
}))
.pipe(gulp.dest('./dist/css'));});
gulp.task('default', function(){
gulp.run('lint', 'sass', 'scripts');
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['lint','sass','scripts']);
});
});
附上gulpfile.js , 还有一点疑惑就是使用gulp，项目的文件结构树应该怎样才合理,我现在的结构是这样
dist下有 css img js
src 下有 sass img js
修正 ＋ 补充：
首先的sass任务改一下：
gulp.task('sass', function() {
return gulp.src('./src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css'));
});再改css：
//css依赖sass，因为不知道你的clean是什么东西，我去掉了
gulp.task("css", ["sass"],function(){
return gulp.src("./dist/css/*.css")
.pipe(spriter({
sprite: "test.png",
slice:"./src/img",
outpath:"./dist/img"
}))
.pipe(gulp.dest('./dist/css'));
});其次，再把default改改：
gulp.task('default', function(){
gulp.run('lint', 'css', 'scripts');
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['lint', 'scripts']);
gulp.watch('./src/sass/*.scss', ['css']);
});
});