Question

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

我尝试手动创建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]开始 'start'... [05:06:38]开始'build'... [05:06:38]开始'css'... [05:06:38]'css'12 ms后出错[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 ms后完成'build'[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"
]

Answer 1

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

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

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

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

因此，对于解决方案的改变：

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

Answer 2

您的错误告诉您原因：

ReferenceError：Gulp没有定义concat。

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

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

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

Gulp'开始'创建错误而不是创建'DIst'文件夹

2 个答案: