javascript - 节点 - 已找到 @import 循环

Question

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

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

现在我遇到了以下问题:

• ma​​in.scss 需要保存两次才能看到浏览器中反射(reflect)的更改。

• 当我在控制台中运行 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([完整路径]\node_modules\orchestrator\index.js:273:3)

在 Gulp.Orchestrator._runStep ([full_path]\node_modules\orchestrator\index.js:214:10)

在 [完整路径]\node_modules\orchestrator\index.js:279:18)

完成时([完整路径]\node_modules\orchestrator\lib\runTask.js:21:8)

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

在 f ([完整路径]\node_modules\once\once.js:17:25)

在 DestroyableTransform.onend([完整路径]\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 Error: An @import loop has been found: (full_path)/src/styles/ma​​in.scss imports src/styles/main.scss 在 第 526 行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 微秒后完成“默认”

[浏览器同步] 访问 URL:

本地:本地主机:3000

外部:192.168 .0.4 :3000

用户界面:本地主机:3001

用户界面外部:192.168 .0.4 :3001

[Browsersync] 服务文件来自:dist

[浏览器同步] 正在观看文件...

---

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

//注入(inject):应用

//结束注入(inject)

Answer 1

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

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

  // ...

它现在应该可以工作了。