Gulp 错误：找不到要导入的文件或无法读取

Question

我目前正在使用 VS Code 构建仅 html 的网站。保存 sass 文件时，我间歇性地收到以下错误。使用browersync，浏览器会在工作时更新更改。错误只是有时会发生，但它阻碍了我的工作。

gulp-notify: [Gulp - Error] Error: sass\style.scss
Error: File to import not found or unreadable: pages/global.
        on line 2 of sass/style.scss
>> @import "pages/global";

我已经在网站的根目录中安装了最新的 npm。我从以前的开发人员那里继承了 gulp 文件，并且在大多数情况下都可以正常工作。

// Defining requirements
var gulp         = require( 'gulp' );
var sass         = require( 'gulp-sass' );
var watch        = require( 'gulp-watch' );
var rename       = require( 'gulp-rename' );
var concat       = require( 'gulp-concat' );
var uglify       = require( 'gulp-uglify' );
var args         = require( 'yargs' ).argv;
var browserSync  = require( 'browser-sync' ).create();
var autoprefixer = require( 'gulp-autoprefixer' );
var cleanCSS     = require( 'gulp-clean-css' );
var sourcemaps   = require( 'gulp-sourcemaps' );
var notify       = require( 'gulp-notify' );
var svgstore     = require( 'gulp-svgstore' );
var cheerio      = require( 'gulp-cheerio' );
var fs           = require( 'fs' );
var gulpif       = require( 'gulp-if' );

// Site Variables
var websiteURL = 'http://devsite.local.com';

// Get args object as a string
var getTask = JSON.stringify(args);

// If task is not production
if ( getTask.indexOf( 'production' ) !== -1 ) {
    // Define "dev" variable
    var dev = false;
} else {
    var dev = true;
}

/**
 * [handleErrors If Sass error]
 * @return [Don't Kill Watch]
 */
function handleErrors(err) {
    var args = Array.prototype.slice.call( arguments );

    // Ignore "untitled folder ENOENT" error (Gulp Watch Issue)
    if ( err.toString().indexOf('ENOENT') >= 0 ) {
        // Keep gulp from hanging on this task
        this.emit( 'end' );
    } else {
        // Send error to notification center with gulp-notify
        notify.onError({
            title: 'Gulp - Error',
            message: 'Error: <%= error.message %>'
        }).apply( this, args );

        // Keep gulp from hanging on this task
        this.emit( 'end' );
    }
}

// BrowserSync
gulp.task( 'browserSync' , function () {

    browserSync.init({
        proxy: websiteURL,
        https: websiteURL.includes('https'),
        notify: false
    });

    // Reload PHP files
    gulp.watch( '**/*.php' )
        .on( 'error', handleErrors )
        .on( 'change', browserSync.reload );
    gulp.watch( '**/*.html' )
        .on( 'error', handleErrors )
        .on( 'change', browserSync.reload );        
});

// Compiles SCSS files in CSS
gulp.task( 'sass', function() {
    gulp.src( 'sass/**/*.scss' )
        .pipe( sourcemaps.init() )
        .pipe( sass().on( 'error', handleErrors ) )
        .pipe( sourcemaps.write() )
        .pipe( gulp.dest( './' ) )
        .pipe( browserSync.stream() );
});

// Build CSS
gulp.task( 'buildcss', function() {
    gulp.src( 'sass/**/*.scss' )
        .pipe( sourcemaps.init() )
        .pipe( sass().on( 'error', handleErrors ) )
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }))
        .pipe(cleanCSS(
            {
                compatibility: 'ie10',
                level: 2
            }
        ))
        .pipe( sourcemaps.write() )
        .pipe( gulp.dest( './' ) )
        .pipe( browserSync.stream() );
});

// Clean CSS (Production only)
gulp.task('cleancss', function() {
    return gulp.src('sass/**/*.scss') // much faster
        .pipe( sass().on( 'error', handleErrors ) )
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }))
        .pipe(cleanCSS(
            {
                compatibility: 'ie10',
                level: 2
            }
        ))
        .pipe(gulp.dest('./'));
});

// SVG Task
gulp.task( 'svgstore', function() {
    return gulp.src(['svg/*.svg'])
    .pipe( rename( { prefix: 'icon-' } ) )
    .pipe( svgstore( { inlineSvg: true } ) )
    .pipe( cheerio({
        run: function( $ ) {
            //$( '[fill]' ).removeAttr( 'fill' );
            $( 'svg' ).attr( 'style', 'display:none' ).attr( 'width', '0' ).attr( 'height', '0' );
        },
        parserOptions: { xmlMode: true }
    } ) )
    .pipe( rename({
        basename: 'svg-icons',
        extname: '.php'
    } ) )
    .pipe( gulp.dest( './' ) );
});

// Uglifies and concat all JS files into one
gulp.task('scripts', function() {

    var jsfiles = JSON.parse(fs.readFileSync('./js/scripts.json'));
    var scripts = jsfiles.scripts;

    return gulp.src(scripts)
    .pipe( gulpif(dev, sourcemaps.init()) )
        .pipe( concat('theme.min.js').on( 'error', handleErrors ) )
        .pipe( uglify().on( 'error', handleErrors ) )
    .pipe( gulpif(dev, sourcemaps.write()) )
    .pipe( gulp.dest('./js/') )
    .pipe( gulpif(dev, browserSync.stream()) );
});

// Build Task (Same as default but with css optimized)
gulp.task('build', ['browserSync'], function(){
    gulp.watch('sass/**/*.scss', ['buildcss']).on( 'error', handleErrors );
    gulp.watch(['svg/*.svg'], ['svgstore']).on( 'error', handleErrors );
    gulp.watch(['js/src/*.js'], ['scripts']).on( 'error', handleErrors );
});

// Production Task
gulp.task('production', ['cleancss', 'scripts']);

// Watch Task
gulp.task('default', ['browserSync'], function(){
    gulp.watch('sass/**/*.scss', ['sass']).on( 'error', handleErrors );
    gulp.watch(['svg/*.svg'], ['svgstore']).on( 'error', handleErrors );
    gulp.watch(['js/src/*.js'], ['scripts']).on( 'error', handleErrors );
    gulp.watch(['js/scripts.json'], ['scripts']).on( 'error', handleErrors );
});

我的 sass 文件存储在 /sass 文件夹中，它在根目录中编译为 style.css。

style.scss

/* Content */
@import "pages/global";
@import "pages/responsive";

Answer 1

这可能是权限问题。尝试根据你的系统运行权限。