Gulp-browsersync (задача наблюдения) иногда не может импортировать частичные файлы SCSS - PullRequest
Новая
       60

Gulp-browsersync (задача наблюдения) иногда не может импортировать частичные файлы SCSS

0 голосов
/ 18 мая 2019

Я создаю веб-сайт с помощью NPM, gulp.js, SASS и т. Д. В gulpfile.js есть задача наблюдения, выполненная с помощью Browsersync. Вот проблема: задача наблюдения - иногда, не всегда - не удается импортировать частичные файлы SCSS .

Я пытался решить эту проблему, проводя некоторые исследования в области переполнения стека и в других местах в Интернете, однако эта проблема повторяется.
Что не так с моим кодом? Заранее спасибо!

Структура каталогов проекта

Вот структура каталогов проекта с некоторыми наиболее важными файлами: 

- dist/
    - css/
        - style.css
    - fonts/
    - img/
    - inc/
    - js/
        - app.js
- node_modules/
- src/
    - fonts/
    - img/
    - inc/
    - js/
        ...
    - scss/
        - _colors.scss
        - _fonts.scss
        - ... some other partial SCSS files
        - main.scss
- gulpfile.js
- package-lock.json
- package.json

Gulpfile.js

Вот мой gulpfile.js : 

const gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
sass = require('gulp-sass'),
uglifyCSS = require('gulp-uglifycss'),
concatCSS = require('gulp-concat-css'),
babel = require('gulp-babel'),
uglifyJS = require('gulp-uglify'),
concatJS = require('gulp-concat'),
browserSync = require('browser-sync').create(),
htmlPartial = require('gulp-html-partial');

// HTML files
gulp.task('manageHTML', function(done){
    gulp.src('./src/**/*.html').
        pipe(htmlPartial({
            basePath: './src/inc/'
        })).
        pipe(gulp.dest('./dist')).
        pipe(browserSync.stream());
    done();
});

// Fonts
gulp.task('manageFonts', function(done){
    gulp.src('./src/fonts/*').
        pipe(gulp.dest('./dist/fonts/')).
        pipe(browserSync.stream());
    done();
});

// SCSS files
gulp.task('manageSASS', function(done){
    gulp.src('./src/sass/*.scss').
        pipe(sass().on('error', sass.logError)).
        pipe(concatCSS('style.css')).
        pipe(uglifyCSS()).
        pipe(gulp.dest('./dist/css/')).
        pipe(browserSync.stream());
    done();
});

// JS files
gulp.task('manageJS', function(done){
    gulp.src([
        'node_modules/babel-polyfill/dist/polyfill.js',
        './src/js/*.js'
        ]).
        pipe(babel({presets: ['es2015']})).
        pipe(concatJS('app.js')).
        pipe(uglifyJS()).
        pipe(gulp.dest('./dist/js/'));
    browserSync.reload();
    done();
});

// Images
gulp.task('manageImg', function(done){
    gulp.src('./src/img/*').
        pipe(imagemin()).
        pipe(gulp.dest('./dist/img/'));
    browserSync.reload();
    done();
});

// ALL TASKS
gulp.task('default', gulp.series('manageHTML', 'manageFonts', 'manageSASS', 'manageJS', 'manageImg'));

// WATCH
gulp.task('watch', function(){
    browserSync.init({
        server: {
            baseDir: "./dist/"
        }
    });
    gulp.watch('./src/**/*.html', gulp.series('manageHTML'));
    gulp.watch('./src/fonts/*', gulp.series('manageFonts'));
    gulp.watch('./src/sass/*.scss', gulp.series('manageSASS'));
    gulp.watch('./src/js/*.js', gulp.series('manageJS'));
    gulp.watch('./src/img/*', gulp.series('manageImg'));
});

Ошибка в терминале

Вот ошибка , которую я получаю в терминале: 

[17:47:35] Starting 'watch'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.43.87:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./dist/
[17:49:21] Starting 'manageSASS'...
[17:49:21] Finished 'manageSASS' after 13 ms
Error in plugin "sass"
Message:
    src\sass\main.scss
Error: File to import not found or unreadable: content.
        on line 11 of src/sass/main.scss
>> @import 'content'; // TOP
   ^
...