Javascript 狼吞虎咽'；启动'；创建错误而不是创建'；地区'；文件夹

启动Gulp start时，需要创建一个Dist文件夹，并在包含的依赖项上开始观察，但实际上，它会在“css”concat上出错

• 我已尝试手动创建Dist文件夹
• 在src目录中创建了test.css文件

这没什么区别。同样的错误会弹出，其他情况不会发生

我下面的教程是： 预期结果见时间指数37:48。这是我的结果

错误

$gulp start[05:06:38]使用gulpfile ~/OneDrive/~webDev/chazSutherland/gulpfile.js[05:06:38]正在启动 “开始”。。。[05:06:38]正在启动“构建”。。。[05:06:38]正在启动“css”。。。 [05:06:38]“css”在12毫秒后出错[05:06:38]引用错误：concat 没有定义 狼吞虎咽。（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:14:11） 在module.exports（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7） 在Gulp.Orchestrator._runTask（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/Orchestrator/index.js:273:3） 在Gulp.Orchestrator._runStep（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/Orchestrator/index.js:214:10） 在Gulp.Orchestrator.start（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/Orchestrator/index.js:134:8） 狼吞虎咽。（/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:39:8）

[05:06:38]在14毫秒后完成“构建”[05:06:38]完成“启动” 27毫秒后

gulpfile.js

const gulp = require('gulp');
const gulpConcat = require('gulp-concat');
const browserSync = require('browser-sync').create();

const scripts = require('./scripts');
const styles = require('./styles');

var devMode = false;

gulp.task('css', function(){
  gulp.src(styles)
    .pipe(concat('main.css'))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('js', function(){
  gulp.src(scripts)
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('html', function(){
  gulp.src('./src/html/**/*.html')
    .pipe(gulp.dest('./dist/'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('build', function(){
  gulp.start(['css', 'js', 'html']);
});

gulp.task('browser-sync', function(){
  browserSync.init(null, {
    open: false,
    server: {
      baseDir: 'dist'
    }
  });
});

gulp.task('start', function(){
  devMode = true;
  gulp.start(['build', 'browser-sync']);
  gulp.watch(['./src/css/**/*.css'], ['css']);
  gulp.watch(['./src/js/**/*.js'], ['js']);
  gulp.watch(['./src/html/**/*.html'], ['html']);
});

package.json

{
  "name": "chazsutherland",
  "version": "1.0.0",
  "description": "Practice practice practice!!",
  "main": "index.js",
  "scripts": {
    "test": "make test"
  },
  "repository": {
    "type": "git",
    "url": "(https://github.com/CyberGolem/learningGulp.com)"
  },
  "keywords": [
    "npm"
  ],
  "author": "Chaz Sutherland",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.2",
    "angular-route": "^1.6.2"
  },
  "devDependencies": {
    "browser-sync": "^2.18.7",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1"
  }
}

[
  "./src/css/**/*.css"
]

[
  "./node_modules/angular/angular.js",
  "./node_modules/angular-route/angular-route.js",
  "./src/js/**/*.js"
]

styles.json

{
  "name": "chazsutherland",
  "version": "1.0.0",
  "description": "Practice practice practice!!",
  "main": "index.js",
  "scripts": {
    "test": "make test"
  },
  "repository": {
    "type": "git",
    "url": "(https://github.com/CyberGolem/learningGulp.com)"
  },
  "keywords": [
    "npm"
  ],
  "author": "Chaz Sutherland",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.2",
    "angular-route": "^1.6.2"
  },
  "devDependencies": {
    "browser-sync": "^2.18.7",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1"
  }
}

[
  "./src/css/**/*.css"
]

[
  "./node_modules/angular/angular.js",
  "./node_modules/angular-route/angular-route.js",
  "./src/js/**/*.js"
]

scripts.json

{
  "name": "chazsutherland",
  "version": "1.0.0",
  "description": "Practice practice practice!!",
  "main": "index.js",
  "scripts": {
    "test": "make test"
  },
  "repository": {
    "type": "git",
    "url": "(https://github.com/CyberGolem/learningGulp.com)"
  },
  "keywords": [
    "npm"
  ],
  "author": "Chaz Sutherland",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.2",
    "angular-route": "^1.6.2"
  },
  "devDependencies": {
    "browser-sync": "^2.18.7",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1"
  }
}

[
  "./src/css/**/*.css"
]

[
  "./node_modules/angular/angular.js",
  "./node_modules/angular-route/angular-route.js",
  "./src/js/**/*.js"
]

---

在您的代码中，您需要gulp concat作为

const gulpConcat=require（'gulp-concat'）

但后来您尝试将其用作
.pipe（concat（'main.css'））

错误告诉您，
concat
没有在第14行定义，这是正确的，因为您定义的是
gulpConcat
，而不是
concat

因此，对于解决方案更改：

const gulpConcat=require（'gulp-concat'）到
const concat=require（'gulp-concat'）
您的错误告诉您原因：

ReferenceError:Gulp中未定义concat

您正在尝试引用脚本中未定义的
concat
变量

const gulpConcat = require('gulp-concat');
// ...
.pipe(concat('main.css'))
// ...
.pipe(concat('scripts.js'))

只需将
gulpConcat
常量重命名为
concat
，错误将被修复。在你提到的视频中