Gulp文件没有在浏览器中更新/构建css

时间:2017-08-20 10:18:52

标签: javascript gulp

所以我可以将scss编译为css。

但是,每当我更改scss文件中的任何内容时,除非我构建样式,否则它对页面没有任何影响。

我的gulp文件:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');

// Gulp watches
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
  // gulp.watch('dist/css/main.css');
});

// Sass compiler
gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass()) // Convert Sass to CSS
    .pipe(gulp.dest('app/css'))
});

// Compile css files
gulp.task('styles', function () {
  return gulp.src('app/css/**/*.css')
    .pipe(concatCss('main.css'))
    .pipe(gulp.dest('dist/css'));
});

/** Default builds **/

// Build
gulp.task('build', ['styles']);

// Watch and build changes
gulp.task('default', ['build', 'watch']);

链接到我的dist css文件的index.html文件也是正确的吗?

<link rel="stylesheet" type="text/css" href="dist/css/main.css">

所有这一切都在发生,我吞下手表文件没关系,但如果我改变任何东西(像身体背景颜色这样简单的东西)没有任何反应。甚至没有硬刷新。我必须吞下构建样式。我是新手学习/学习但是在每次改变之后肯定会建立风格是不对的?

感谢您的任何建议。我知道我问过编译,我弄清楚为什么那不起作用,但我一直在用这个圈子四处走动。

1 个答案:

答案 0 :(得分:1)

我认为发生的事情是gulp的监视任务只是从sass编译css,而不是在dist/css/main.css中连接css。

将任务styles添加到gulp的watch方法中,然后重试:

// Gulp watches
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});

希望这有帮助! :)