Gulp“开始”创建错误而不是创建“DIst”文件夹答案

【问题标题】：Gulp 'start' creating errors instead of creating a 'DIst' folderGulp“开始”创建错误而不是创建“DIst”文件夹
【发布时间】：2017-07-01 12:24:42
【问题描述】：

当启动 Gulp 时，预计会创建一个 Dist 文件夹，并在包含的依赖项上开始监视 - 但相反 - 它会在“css”连接上出错。

我尝试过手动创建 Dist 文件夹
在src目录下创建了一个test.css文件

这并没有什么不同。弹出相同的错误，没有其他任何事情发生。

我正在关注的教程 :: https://www.youtube.com/watch?v=p9ZngMW80-k&t=1s 在时间索引 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] ReferenceError: concat 没有定义在 Gulp。（/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) 在 Gulp。 (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:39:8)
at module.exports (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:134: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"
  }
}

styles.json

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

scripts.json

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

【问题讨论】：

标签： javascript gulp

【解决方案1】：

你的错误告诉你原因：

ReferenceError: concat 未在 Gulp 中定义。

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

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

只需将gulpConcat 常量重命名为concat 即可修复错误。在你提到的视频中，the declaration is added at 22:27。

【讨论】：

【解决方案2】：

在您的代码中，您需要 gulp concat as

const gulpConcat = require('gulp-concat');

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

错误告诉你concat 没有在第 14 行定义，这是真的，因为你定义了gulpConcat 而不是concat

所以对于解决方案的改变：

const gulpConcat = require('gulp-concat'); 到 const concat = require('gulp-concat');

【讨论】：