Javascript 节点-已找到@import循环

我对js、node和所有相关的东西都是新手。 我正在尝试使用gulp、bower、browser sync和其他插件从头开始建立前端开发环境

我几乎完成了，它在某种程度上起作用了，除了一些我无法解决的细节，因为我不确定它是在代码语法中还是在我的gulpfile.js文件中执行的函数的顺序中，还是因为插件没有被正确使用。我已经尝试过改变它们的顺序，改变一些路径等等，但没有结果

现在我遇到了以下问题：

• 在查看浏览器中反映的更改之前，main.scs需要保存两次

• 当我在控制台中运行gulp时，我收到的就是这些错误（这些错误是新的，是在Poeta在回答中提出的一个小改动之后出现的，这对我帮助很大

---

[16:38:08]正在启动“html”

[16:38:08]“html”在41毫秒后出错

[16:38:08]引用错误：未定义文件 大口喝。（[full_path]\gulpfile.js:50:18）

在module.exports（[完整路径]\node\u modules\orchestrator\lib\runTask.js:34:7）

在Gulp.Orchestrator.\u runTask（[完整路径]\node\u modules\Orchestrator\index.js:273:3）

在Gulp.Orchestrator.\u runStep（[完整路径]\node\u modules\Orchestrator\index.js:214:10）

在[完整路径]\node\u modules\orchestrator\index.js:279:18）

完成时（[完整路径]\node\u modules\orchestrator\lib\runTask.js:21:8）

在[完整路径]\node\u modules\orchestrator\lib\runTask.js:52:4

在f（[full\u path]\node\u modules\once\once.js:17:25）

在DestroyableTransform.oned（[full\u path]\node\u 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 错误：发现@import循环：（完整路径）/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]gulp将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行：

//注入：应用程序

---

//endinject

您可能已经注意到的错误在您的样式任务中。问题是您正在导入所有.scss文件，包括main.scss本身。这就是你的循环，就在那里。从应注入的文件中删除main.scss，如下所示：

gulp.task（'style'，function（））{
var injectAppFiles=gulp.src（['！src/styles/main.scss'，'src/styles/*.scss']，{read:false}）；
// ...

---

它现在应该可以工作了。

谢谢Bruno，它解决了@import循环问题。但是出现了一条新的错误消息，与我将粘贴到此处的html和inject插件有关。对不起Bruno，我昨天不得不离开键盘。我刚刚更新了线程。谢谢您的帮助。只需将injectAppFiles变量更改为injectFiles关于gulp任务，我认为您应该可以开始了！非常感谢您，Bruno。两个答案都解决了代码中的所有不一致问题，现在没有显示错误消息。此外，不需要保存两次来查看浏览器中的更改。我非常感谢您的帮助。