Gulp-browsersync(监视任务)有时无法导入部分SCSS文件

时间:2019-05-18 16:40:09

标签: gulp gulp-watch gulp-sass gulp-browser-sync

我正在NPM,gulp.js,SASS等的帮助下建立一个网站。在gulpfile.js中,使用Browsersync进行监视任务。问题出在这里:监视任务-有时(并非总是)-无法导入部分SCSS文件

我试图通过在Stack Overflow和Web上的其他地方进行一些研究来解决该问题,但是这种情况仍在继续发生。
我的代码有什么问题?预先谢谢你!

项目的目录结构

这是项目的目录结构,其中包含一些最重要的文件:

- 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
   ^

0 个答案:

没有答案