我是 js、node 和所有相关事物的新手。我正在尝试使用 gulp、bower、浏览器同步和其他插件从头开始设置前端开发环境。
我快完成了，它以某种方式工作，除了一些我无法解决的细节，因为我不确定它是代码语法中的东西还是我的 gulpfile.js 文件中执行的函数的顺序，或者因为插件没有正确使用。我已经尝试更改它们的顺序，更改某些路径等，但没有结果。
现在我遇到以下问题：
main.scss 需要保存两次才能看到浏览器中反映的更改。
当我在控制台中运行 gulp 时，这是我收到的（这些错误是新的，并且出现在 Poeta 在他的回答中提出的一个小改动之后，这对我有很大帮助。
[16:38:08] 开始'html'...
[16:38:08] 'html' 在 41 毫秒后出错
[16:38:08] ReferenceError：injectFiles 未 在 Gulp 中定义。([完整路径]\gulpfile.js:50:18)
在 module.exports ([full_path]\node_modules\orchestrator\lib\runTask.js:34:7)
在 Gulp.Orchestrator._runTask ([full_path]\node_modules\orchestrator\index.js:273:3)
在 Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)
在 [full_path]\node_modules\orchestrator\index.js:279:18)
完成时 ([full_path]\node_modules\orchestrator\lib\runTask.js:21:8)
在 [full_path]\node_modules\orchestrator\lib\runTask.js:52:4
在 f ([full_path]\node_modules\once\once.js:17:25)
在 DestroyableTransform.onend ([full_path]\node_modules\end-of-stream\index.js:31:18)
在 emitNone (events.js:91:20)
这是我的 gulpfile.js 内容：
var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var wiredep = require('wiredep').stream;
var plumber = require('gulp-plumber');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync');
var uglify = require('gulp-uglify');
gulp.task('styles', function(){
var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});
function transformFilepath(filepath) {
return '@import "' + filepath + '";';
}
var injectAppOptions = {
transform: transformFilepath,
starttag: '// inject:app',
endtag: '// endinject',
addRootSlash: false
};
var injectGlobalOptions = {
transform: transformFilepath,
starttag: '// inject:global',
endtag: '// endinject',
addRootSlash: false
};
return gulp.src('src/styles/main.scss')
.pipe(plumber())
.pipe(wiredep())
.pipe(inject(injectGlobalFiles, injectGlobalOptions))
.pipe(inject(injectAppFiles, injectAppOptions))
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
gulp.task('html', ['styles'], function(){
var injectAppFiles = gulp.src('src/styles/*.scss', {read: false});
var injectOptions = {
addRootSlash: false,
ignorePath: ['src', 'dist']
};
return gulp.src('src/index.html')
.pipe(plumber())
.pipe(inject(injectFiles, injectOptions))
.pipe(gulp.dest('dist'));
});
gulp.task('imagemin', function() {
gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'));
});
gulp.task('uglify', function() {
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('sass', function() {
gulp.src('src/styles/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('dist/styles/'));
});
gulp.task('browser-sync', function() {
browserSync.init(["styles/*.css", "js/*.js","index.html"], {
server: {
baseDir: "dist"
}
});
});
gulp.task('watch', function() {
gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);
那么，您能否为我指明正确的方向，以正确的方式设置这个环境？
关于先前问题的更新：由于布鲁诺·波埃塔的回答，以下问题得到了解决。
管道工发现未处理的错误：插件“gulp-sass”中的错误
消息：src\styles\main.scss Error: An @import loop has found: (full_path) /src/styles/main.scss在 src/styles/main.scss 的第 526 行导入 src/ styles/main.scss
在那条消息之后...
[15:11:18] 4.48 秒后完成“样式”
[15:11:18] 开始'html'...
[15:11:19] 将 1 个文件吞入 index.html。
[15:11:19] 1.44 秒后完成“html”
[15:11:19] 开始“默认”...
[15:11:19] 6.98 μs 后完成“默认”
[Browsersync] 访问 URL：
本地：本地主机：3000
外部：192.168 .0.4：3000
用户界面：本地主机：3001
用户界面外部：192.168 .0.4:3001
[Browsersync] 提供来自 dist 的文件
[Browsersync] 正在观看文件...
注意：第 526 行不存在，因为它是由 gulp-inject 插件生成的。这些是 main.css 文件中的最后几行，第 520 和 521 行：
// 注入：应用程序
// 结束注入