每当gulp进入’markup’功能时,就会出现上述消息.
这是我的gulpfile:
var gulp = require('gulp'),
autoPrefixer = require('gulp-autoprefixer'),
jade = require('gulp-jade'),
liveReload = require('gulp-livereload'),
sourceMaps = require('gulp-sourcemaps'),
ts = require('gulp-typescript'),
tsLint = require('gulp-tslint'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Configuration
var config = {
js: 'public/_assets/frontend/js',
css: 'public/_assets/frontend/css',
fonts: 'public/_assets/frontend/fonts',
images: 'public/_assets/frontend/img',
markup: 'public/'
};
// Javascript
gulp.task('scripts', function() {
var tsResult = gulp.src(['src/ts/*.ts', 'src/ts/**/*.ts'])
.pipe(tsLint())
.pipe(ts({
noImplicitAny: true
}));
tsResult.js
.pipe(gulp.dest(config.js))
.pipe(liveReload());
});
// Sass
gulp.task('sass', function() {
return gulp.src(['src/sass/*.scss', 'src/sass/**/*.scss'])
.pipe(watch(['src/sass/*.scss', 'src/sass/**/*.scss']))
.pipe(sourceMaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(autoPrefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(sourceMaps.write())
.pipe(gulp.dest(config.css))
.pipe(liveReload());
});
// jade
gulp.task('markup', function() {
return gulp.src([['src/**/*.jade', 'src/**/_*.jade']])
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest(config.markup))
.pipe(liveReload());
});
// Images
gulp.task('images', function() {
return gulp.src(['src/images/**/*.*', 'src/images/*.*'])
.pipe(gulp.dest(config.images));
});
// Watch
gulp.task('watch', function() {
liveReload.listen();
gulp.watch(['src/ts/*.ts', 'src/ts/**/*.ts'], ['scripts']);
gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
gulp.watch(['src/*.jade', 'src/**/*.jade'], ['markup']);
});
// Default Task
gulp.task('default', function() {
gulp.start('sass', 'scripts', 'markup', 'images', 'watch');
});
// Dist Scripts
gulp.task('distScripts', function() {
return gulp.src(['src/ts/plugins/**/*', 'src/ts/*.js'], { "base" : "./src/ts" })
.pipe(gulp.dest(config.js));
});
// Dist Styles
gulp.task('distStyles', function() {
return gulp.src('src/sass/**/*.css', { "base" : "./src/sass" })
.pipe(autoPrefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(gulp.dest(config.css));
});
// Dist Fonts
gulp.task('distFonts', function() {
return gulp.src('src/fonts/**/*', { "base" : "./src/fonts" })
.pipe(gulp.dest(config.fonts));
});
// Dist
gulp.task('dist', function() {
gulp.start('distScripts', 'distStyles', 'images', 'distFonts');
});
这是我运行’gulp’时得到的消息:
(node:9460) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. [00:39:30] Using gulpfile D:\Projects\FrontEnd\Project\gulpfile.js [00:39:30] Starting 'default'... [00:39:30] Starting 'sass'... [00:39:30] Starting 'scripts'... [00:39:30] Finished 'scripts' after 4.66 ms [00:39:30] Starting 'markup'... [00:39:30] 'markup' errored after 86 μs [00:39:30] Error: Missing positive glob
at Object.gs.create (D:\Projects\FrontEnd\Project\node_modules\gulp\node_modules\glob-stream\index.js:73:39)
at Gulp.src (D:\Projects\FrontEnd\Project\node_modules\gulp\node_modules\vinyl-fs\lib\src\index.js:33:23)
at Gulp.<anonymous> (D:\Projects\FrontEnd\Project\gulpfile.js:50:14)
at module.exports (D:\Projects\FrontEnd\Project\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (D:\Projects\FrontEnd\Project\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (D:\Projects\FrontEnd\Project\node_modules\orchestrator\index.js:214:10)
at D:\Projects\FrontEnd\Project\node_modules\orchestrator\index.js:279:18
at finish (D:\Projects\FrontEnd\Project\node_modules\orchestrator\lib\runTask.js:21:8)
at module.exports (D:\Projects\FrontEnd\Project\node_modules\orchestrator\lib\runTask.js:60:3)
at Gulp.Orchestrator._runTask (D:\Projects\FrontEnd\Project\node_modules\orchestrator\index.js:273:3) [00:39:30] Finished 'default' after 42 ms
知道为什么吗?似乎在渲染Jade时会发生……当然,所有依赖项都已安装.
解决方法:
好像你正在使用多维数组[[“item1”,“item2”]].要使用gulp.src()读取文件,您应该使用像’path / to / * .jade’这样的字符串或像[“path / to / first / * .jade”,“path / to / second”这样的简单onedimensional数组. /glob/**/*.jade“.
在您的情况下,JADE-Task应如下所示:
// jade
gulp.task('markup', function() {
return gulp.src(['src/**/*.jade', 'src/**/_*.jade'])
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest(config.markup))
.pipe(liveReload());
});
关于你的手表任务:
您应该在自己的任务中调用livereload作为watch-task的回调.还建议将目标文件夹的根路径定义为liveReload()对象中的参数选项.
// Watch
gulp.task('livereload', function() {
return gulp.src('./dist')
.pipe(
liveReload({
start: true,
basePath: 'path/to/destination'
})
);
});
gulp.task('watch', ['livereload'], function() {
liveReload.listen()
gulp.watch(['src/ts/*.ts', 'src/ts/**/*.ts'], ['scripts']);
gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
gulp.watch(['src/*.jade', 'src/**/*.jade'], ['markup']);
});
不要忘记在默认任务中启动监视任务
// Dist
gulp.task('dist', ['watch'], function() {
gulp.start('distScripts', 'distStyles', 'images', 'distFonts');
});