javascript – 错误:缺少正面水珠

每当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');
});
上一篇:javascript,gulp,watch,changed


下一篇:javascript – Gulp Browserify ReferenceError:未定义source