gulp-sass和gulp-watch,在保存scss时无法找到文件

时间:2015-05-29 17:15:18

标签: javascript node.js gulp gulp-watch gulp-sass

我正在设置我的gulpfile,当监视任务运行scss任务时,我遇到了gulp-sass的问题。

这就是我的gulpfile.js的样子:

[0]

base.scss只包含这个: (也尝试了完整路径,没有文件。同样的结果)

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');

var onError = function(err) {
    console.log(err);
};

var bases = {
    dist: './dist/',
    src: './src/'
};

var paths = {
 sass: [bases.src + 'scss/base.scss'],
 sourcemaps: '/'
};

gulp.task('scss', function(){
    return gulp.src(paths.sass)
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(sourcemaps.init())
    .pipe(sass({
        sourcemap: true,
        style: 'expanded',
        sourceComments: 'normal',
        onError: onError
    }))
    .pipe(sourcemaps.write(paths.sourcemaps))
    .pipe(gulp.dest(bases.dist + 'css/'))
});

gulp.task('watch', function(){
    gulp.watch(bases.src + 'scss/**/*.scss', ['scss'])

});

gulp.task('default', ['scss','watch']);

我进入控制台的错误:

@import 'modules/modules_base.scss';

基本错误是:1:9要导入的文件未找到或不可读:./ src /scss / modules / modules_base.scss

app的结构:

[18:54:13] Finished 'scss' after 12 ms
[18:54:15] Starting 'scss'...
{ [Error: src\scss\base.scss
  1:9  file to import not found or unreadable: ./src/scss/modules/modules_base.scss
Current dir: ]
  message: 'src\\scss\\base.scss\n  1:9  file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
  column: 9,
  line: 1,
  file: 'stdin',
  status: 1,
  messageFormatted: '\u001b[4msrc\\scss\\base.scss\u001b[24m\n\u001b[90m  1:9\u001b[39m  file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
  name: 'Error',
  stack: 'Error: src\\scss\\base.scss\n  1:9  file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: \n    at options.error (c:\\Code\\colorpicker\\node_modules\\gu
lp-sass\\node_modules\\node-sass\\lib\\index.js:276:32)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }

只有在我保存modules_base.scss并触发监视任务时才会发生错误,而且当我运行默认任务时从未发生错误。

所有建议都表示赞赏!

注意: 节点-v:0.12.0 Gulp:3.8.11 gulp-sass:2.0.1

1 个答案:

答案 0 :(得分:0)

您使用的是vscode吗?我在github上找到了这个

gulp.task('sass', function () {
    return gulp.src(SCSS_SRC)
        .pipe(wait(500))
        .pipe(sass({
            outputStyle: 'compressed',
            includePaths: ['./bower_components/susy/sass', './bower_components/breakpoint-sass/stylesheets']
        }).on('error', sass.logError))
        .pipe(concat('style.css'))
        .pipe(autoprefixer({
            browsers: ['>1%', 'last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./dist/css'));
});

基本上

  

我在保存崇高时遇到了这个问题。第一次   文件改变了,gulp watch会在文件完成之前触发   保存,或者在lib-sass启动时无法读取。我加了50ms延迟   到似乎有效的管道。

你试过这个吗?

编辑 - 我使用run-sequence来确保在运行需要它们的东西之前完成进程。看看

gulp.task('default',function(callback){
    runSequence('clean-folder','css','js'['responsive-jpg','responsive-webp','copy-data']),callback
});

基本上clean-folder运行并删除我想要重做的东西,然后css编译。在run-sequence获得所有scss已被转换的回调之前,没有任何事情会运行。