CODEWITHSUNDEEP
javascriptgulp
Chaz Sutherland
Chaz Sutherland

Reputation: 49

Gulp 'start' creating errors instead of creating a 'DIst' folder

When initiating Gulp start it's expected a Dist folder be created and a watch to begin on the included dependencies–but instead–it errors out on the 'css' concat.

It hasn't made a difference. The same error pops up and nothing else happens.

The tutorial I'm following :: https://www.youtube.com/watch?v=p9ZngMW80-k&t=1s with the expected result seen at time index 37:48. Here is my result ...

ERROR

$ gulp start [05:06:38] Using gulpfile ~/OneDrive/~webDev/chazSutherland/gulpfile.js [05:06:38] Starting 'start'... [05:06:38] Starting 'build'... [05:06:38] Starting 'css'... [05:06:38] 'css' errored after 12 ms [05:06:38] ReferenceError: concat is not defined at Gulp. (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:14:11) 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) at 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] Finished 'build' after 14 ms [05:06:38] Finished 'start' after 27 ms

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"
]

Upvotes: 1

Views: 359

Answers (2)

Daniel Olszewski
Daniel Olszewski

Reputation: 14411

Your error tells you the cause:

ReferenceError: concat is not defined at Gulp.

You're trying to reference a concat variable which isn't defined in your script.

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

Just rename the gulpConcat constant to concat and the error will be fixed. In the video you mentioned, the declaration is added at 22:27.

Upvotes: 1

Miroslav Saracevic
Miroslav Saracevic

Reputation: 1466

In your code you are requiring gulp concat as

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

But then later you are trying to use it as .pipe(concat('main.css'))

The error is telling you that concat is not defined at line 14, and that is true, because you define gulpConcat instead of concat

So for solution change:

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

Upvotes: 1

Related Questions