节点 - 已找到 @import 循环

Question

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

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

现在我遇到了以下问题：

main.scss需要保存两次才能看到浏览器反映的变化。
当我在控制台中运行 gulp 时，这是我收到的 （这些错误是新出现的，是在 Poeta 在他的回答，对我帮助很大

[16:38:08] 开始 'html'...

[16:38:08] 'html' 41 毫秒后出错

[16:38:08] ReferenceError: injectFiles 未定义 在 Gulp。 ([full_path]\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']);

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

关于之前问题的更新：由于 B运行o Poeta 的回答，以下问题得到解决。

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

消息：src\styles\main.scss 错误：已找到 @import 循环： (full_path)/src/styles/main.scss 导入 src/styles/main。 src/styles/main.scss

的 行 526 上的 scss

在那条消息之后...

[15:11:18] 4.48 秒后完成 'styles'

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

[15:11:19] gulp-注入1个文件到index.html.

[15:11:19] 在 1.44 秒后完成 'html'

[15:11:19] 开始 'default'...

[15:11:19] 在 6.98 微秒后完成 'default'

[Browsersync] 访问 URL：

本地：本地主机：3000

外部：192.168 .0.4 :3000

UI: 本地主机:3001

UI 外部：192.168 .0.4 :3001

[Browsersync] 服务文件来自：dist

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

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

// inject:app

// 结束注入

Answer 1

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

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

  // ...

现在应该可以使用了。

节点 - 已找到 @import 循环

Node - An @import loop has been found

javascript

gulp

gulp-inject

gulp-sass

gulp-watch