节点 - 已找到 @import 循环

Question

我是 js、node 和所有相关事物的新手。 我正在尝试使用 gulp、bower、浏览器同步和其他插件从头开始设置前端开发环境。

我快完成了，它正在以某种方式工作，除了一些我无法解决的细节，因为我不确定它是在代码语法中还是在我的 gulpfile 中执行的函数的顺序。 js 文件，或者因为插件没有正确使用。我已经尝试改变它们的顺序，改变一些路径等，但没有结果。

现在我遇到以下问题：

• ma​​in.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']);

那么，您能否为我指明正确的方向，以正确的方式设置此环境？

---

关于上一个问题的更新：感谢 Bruno Poeta 的回答，以下问题已得到解决。

管道工发现未处理的错误：插件“gulp-sass”中的错误

消息：src\styles\main.scss 错误：已找到 @import 循环： (full_path)/src/styles/ma​​in.scss 在 第 526 行导入 src/styles/main.scss src/styles/main.scss

在那条消息之后……

[15:11:18] 4.48 秒后完成的“样式”

[15:11:18] 开始'html'...

[15:11:19] gulp-inject 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

UI 外部：192.168 .0.4 :3001

[Browsersync] 提供来自：dist 的文件

[Browsersync] 正在观看文件...

---

注意：第 526 行不存在，因为它是由 gulp-inject 插件生成的。这些是 main.css 文件中的最后几行，第 520 行和第 521 行：

// 注入：应用程序

//结束注入

Answer 1

您可能注意到的错误在于您的 styles 任务。问题是您正在导入所有 .scss 文件，包括 ma​​in.scss 本身。那是你的循环，就在那里。从应该注入的文件中删除 ma​​in.scss，如下所示：

gulp.task('styles', function(){
  var injectAppFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});

  // ...

它现在应该可以工作了。