**
首先是结构目录
**
**
运行gulp clean时成功,运行gulp时除了成功的状态外,会分别报以下的错误:
**
成功
错误1:Error: ENOENT: no such file or directory, open 'D:\webapp\dist\styles\main.css'
错误2:Error: ENOENT: no such file or directory, stat 'D:\webapp\dist\scripts\main.js'at Error (native)
错误3:Error: EEXIST: file already exists, mkdir 'D:\webapp\dist\styles'at Error (native)
错误4:Error: ENOENT: no such file or directory, stat 'D:\webapp\dist\scripts\main.min.js'at Error (native)
错误5:Error: ENOENT: no such file or directory, open 'D:\webapp\dist\images\2.jpg'at Error (native)
**
附gulpfile.js代码
**
var gulp = require('gulp'),
htmlhint = require('gulp-htmlhint'),
htmlmin = require('gulp-htmlmin'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
tinylr = require('tiny-lr'),
server = tinylr(),
port = 35729,
livereload = require('gulp-livereload');
// HTML处理
gulp.task('html', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist/';
gulp.src(htmlSrc)
.pipe(htmlhint())
.pipe(htmlmin())
//.pipe(rename({ suffix: '.min' }))
.pipe(livereload(server))
.pipe(gulp.dest(htmlDst))
});
// 样式处理
gulp.task('css', function () {
var cssSrc = './src/styles/*.scss',
cssDst = './dist/styles';
gulp.src(cssSrc)
.pipe(sass())
.pipe(gulp.dest(cssDst))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest(cssDst));
});
// 图片处理
gulp.task('images', function(){
var imgSrc = './src/images/**/*.{gif,jpeg,jpg,png}',
imgDst = './dist/images/';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(livereload(server))
.pipe(gulp.dest(imgDst));
})
// js处理
gulp.task('js', function () {
var jsSrc = './src/scripts/*.js',
jsDst ='./dist/scripts';
gulp.src(jsSrc)
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest(jsDst))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest(jsDst));
});
// 清空图片、样式、js
gulp.task('clean', function() {
gulp.src(['./dist/styles', './dist/scripts', './dist/images'], {read: false})
.pipe(clean());
});
// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
gulp.start('html','css','images','js');
});
// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){
server.listen(port, function(err){
if (err) {
return console.log(err);
}
// 监听html
gulp.watch('./src/*.html', function(event){
gulp.run('html');
})
// 监听css
gulp.watch('./src/styles/*.scss', function(){
gulp.run('css');
});
// 监听images
gulp.watch('./src/images/**/*', function(){
gulp.run('images');
});
// 监听js
gulp.watch('./src/scripts/*.js', function(){
gulp.run('js');
});
});
});
这个东西没多少技术含量,多查查细节,cssDst = './dist/styles';jsDst ='./dist/scripts';后面的反斜杠呢,还有js任务里你的concat后的dest和uglify后的dest都是相同的路径,你想要的是什么呢?
自己解决了!在每个任务流的开始加一个return 关键字