Question

当我启动gulp时，一切正常，但是当我启动gulp clean（删除构建文件夹）然后再次启动gulp时，它会如下所示：

浏览器打开
html文件加载时没有标记
浏览器同步刷新浏览器
现在CSS文件加载并带有标记的html显示

检查我的控制台时，我发现错误main.css can't be found但是当我检查来源标签时它肯定已加载。

gulp.task('compass', function(){
    gulp.src('_sass/**/*.scss')
        .pipe(compass({
            css: 'css/',
            sass: '_sass/',
            image: 'images/',
            logging: true,
            style: 'compressed'
        }))
        .on('error', function(error){
            console.log('Compass Error')
            console.log(error)
        })
        .pipe(minifyCSS({
            keepBreaks: false,
            keepSpecialComments:true
        }))
        .pipe(gulp.dest('css/'));
        console.log('COMPASS')
});

gulp.task('css', function(){
    gulp.src('_css/**/*.css')
        .pipe(gulp.dest('css/'))
});

gulp.task('js', function () {
    gulp.src(['_scripts/plugins/*.js','_scripts/main.js'])
        .pipe(concat(pkg.name + '.js'))
        .pipe(gulp.dest('scripts/'))
        .pipe(rename(pkg.name + '.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('scripts/'));

    gulp.src(['_scripts/vendor/*.js'])
        .pipe(concat(pkg.name + '.js'))
        .pipe(gulp.dest('scripts/'))
        .pipe(rename('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('scripts/'));
});

gulp.task('html', ['jekyll'], function() {
    // --> Minhtml
    gulp.src([
        path.join('_site/', '*.html'),
        path.join('_site/', '*/*/*.html'),
        path.join('_site/', '*/*/*/*.html')
    ])
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('_site/'))
    .pipe(browserSync.reload({stream:true}));
    console.log('HTML')
});

gulp.task('html-watch',['html'], function(done){
    browserSync.reload();
    done();
});

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: './_site/'
        },
        browser: "google chrome"
    });
});

gulp.task('default', ['css', 'compass', 'js', 'html'], function (event) {
    //--> HTML
    gulp.watch([
        path.join('./', '*.html'),
        path.join('./', '*/*.html'),
        path.join('./', '*/*.md'),
        path.join('./', '*/*.markdown'),
        '!_site/*.html',
        '!_site/*/*.html'
    ], ['html-watch']);

    //--> JS & SASS tasks
    gulp.watch('_sass/**/*.scss', ['compass']);
    gulp.watch('_scripts/**/*.js', ['js']);

    // ---> CSS
    gulp.watch('_css/**/*.css', ['css']);

    //After compass & sass tasks are run, start jekyll
    gulp.watch(['css/*.css', 'scripts/*.js'],['jekyll-watch']);
    gulp.run('browser-sync');
});

// Clean build folders
gulp.task('clean', function (cb) {
  del.sync([
    'scripts',
    'css',
    '_site'
  ], cb);
});

Answer 1

您仅在browserSync.reload();和html任务中html-watch，因此仅在.html .md等更改时才重新加载。你需要把它放在CSS和JS任务中。

gulp.task('compass', function(){
  gulp.src('_sass/**/*.scss')
    .pipe(compass({
        css: 'css/',
        sass: '_sass/',
        image: 'images/',
        logging: true,
        style: 'compressed'
    }))
    .on('error', function(error){
        console.log('Compass Error')
        console.log(error)
    })
    .pipe(minifyCSS({
        keepBreaks: false,
        keepSpecialComments:true
    }))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}));
    console.log('COMPASS')
});

gulp.task('css', function(){
  gulp.src('_css/**/*.css')
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('js', function () {
  gulp.src(['_scripts/plugins/*.js','_scripts/main.js'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('scripts/'))
    .pipe(rename(pkg.name + '.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('scripts/'))
    .pipe(browserSync.reload({stream:true}));

  gulp.src(['_scripts/vendor/*.js'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('scripts/'))
    .pipe(rename('vendors.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('scripts/'))
    .pipe(browserSync.reload({stream:true}));
});

修改

此外，您的默认任务无法正常等待['css', 'compass', 'js', 'html']完成。您应该返回一个正常工作的承诺。

在css和scss任务中，只需在return之前添加gulp.src：

return gulp.src('_css/**/*.css') return gulp.src('_sass/**/*.scss')

在js任务上，这有点复杂，因为它有两个gulp.src，但您可以在这里（github）查看建议或将其分为两个任务。

Gulp仅在浏览器刷新后加载CSS

1 个答案: