Question

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

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

现在我遇到了以下问题：

在查看浏览器中反映的更改之前，需要将main.scss保存两次。
当我在控制台中运行gulp这是我收到的（这些错误是新的，并且在Poeta在他的回答中提出的一个小改动后出现，这对我帮助很大。 < / p>

[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）

at Gulp.Orchestrator._runStep（[full_path] \ node_modules \ orchestrator \ index.js：214：10）

at [full_path] \ node_modules \ orchestrator \ index.js：279：18）

at finish（[full_path] \ node_modules \ orchestrator \ lib \ runTask.js：21：8）

at [full_path] \ node_modules \ orchestrator \ lib \ runTask.js：52：4

at 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 / main.scss在第526行导入src / styles / main.scss SRC /风格/ main.scss

在该消息之后......

[15:11:18]在4.48秒之后完成'风格'

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

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

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

[15:11:19]开始'默认'......

[15:11:19]6.98μs后完成'默认'

[Browsersync]访问网址：

本地：localhost：3000

外部：192.168 .0.4：3000

UI：localhost：3001

UI外部：192.168 .0.4：3001

[Browsersync]从：dist

提供文件

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

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

// inject：app

// endinject

Answer 1

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

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

  // ...

它现在应该可以工作。

节点 - 找到@import循环

1 个答案: