我正在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 :
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
^