Develop Reference

Gulp error occurred on running gulp default command

When I'm trying to run the gulp default command on git bash an error occurred!
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\wamp64\www\WP-PROJECTS\thfireplaces.ca\demo_new\wp-content\themes\thfireplaces\gulpfile.js:181:6)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at requireOrImport (C:\Users\Momin Riyadh\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}
Here is my machine details node version 12.14.1 npm version 7.0.2 gulp local version 4.0.2!
package.json
{
"name": "instaHtmlQuickPack",
"version": "0.6.5",
"description": "Html Quick Pack",
"main": "index.js",
"scripts": {
"postinstall": "gulp default"
},
"engines": {
"npm": ">=2.1.8"
},
"repository": {
"type": "git",
"url": "#"
},
"keywords": [
"wordpress",
"theme",
"bootstrap"
],
"author": "Azizul Hoq",
"license": "GPL-2.0",
"bugs": {
"url": "#"
},
"homepage": "#",
"dependencies": {
"bootstrap": "4.3.1",
"browser-sync": "^2.18.12",
"del": "^3.0.0",
"gulp": "^4.0.0",
"gulp-clean-css": "^3.7.0",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.6.1",
"gulp-cssnano": "^2.1.2",
"gulp-ignore": "^2.0.2",
"gulp-imagemin": "^3.3.0",
"gulp-merge": "^0.1.1",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "2.6.0",
"gulp-uglify": "^3.0.0",
"gulp-watch": "^4.3.11",
"jquery": "3.2.1",
"merge2": "^1.1.0",
"popper.js": "^1.11.1",
"run-sequence": "^2.0.0"
},
"devDependencies": {
"gulp-autoprefixer": "^4.0.0",
"gulp-csscomb": "^3.0.8",
"gulp-filenames": "^4.0.1"
}
}
gulpfile.js
// Defining base pathes
var basePaths = {
node: './node_modules/',
src: './src/',
assets: './assets/',
vendorsCss: './src/vendors/css/',
vendorsJs: './src/vendors/js/'
};
var jsFileList = [
basePaths.vendorsJs+'*.js',
basePaths.src+'js/custom-script.js'
];
var cssFileList = [
basePaths.vendorsCss+'*.css'
];
// console.log(jsFileList);
// Defining requirements
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-cssnano');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var ignore = require('gulp-ignore');
var del = require('del');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var csscomb = require('gulp-csscomb');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync').create();
// browser-sync watched files
// automatically reloads the page when files changed
var browserSyncWatchFiles = [
basePaths.assets+'css/*.css',
basePaths.assets+'js/*.js',
basePaths.src+'media/**',
'./*.html',
'./*.php'
];
var browserSyncOptions = {
proxy: "http://localhost/WP-PROJECTS/thfireplaces.ca/demo_new/",
notify: false
};
// Run:
// gulp browser-sync
// Starts browser-sync task for starting the server.
gulp.task('browser-sync', function() {
browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});
// Run:
// gulp sass
// Compiles SCSS files in CSS
gulp.task('sass', function () {
gulp.src(basePaths.src+'sass/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('.'))
// .pipe(csscomb())
.pipe(gulp.dest(basePaths.assets+'css'))
.pipe(browserSync.stream());
});
// Run:
// gulp concat-css
// concat css file from src
gulp.task('concat-css', function() {
return gulp.src(cssFileList)
.pipe(plumber())
.pipe(concat('bundle.css'))
.pipe(gulp.dest(basePaths.assets+'css/'))
.pipe(browserSync.stream());
});
// Run:
// gulp concat-js
// concat js file from src
gulp.task('concat-js', function() {
return gulp.src(jsFileList)
.pipe(plumber())
.pipe(concat('bundle.js'))
.pipe(gulp.dest(basePaths.assets+'js/'))
.pipe(browserSync.stream());
});
// Run:
// gulp minifycss
// Minifies CSS files
gulp.task('minifycss', function(){
return gulp.src([basePaths.assets+'css/bundle.css', basePaths.assets+'css/theme.css'])
.pipe(plumber())
.pipe(concat('theme.min.css'))
.pipe(minifyCSS({keepBreaks:false,safe: true}))
.pipe(minifyCSS({
reduceIdents: {
keyframes: false
},
discardUnused: {
keyframes: false
},
discardComments: {
removeAll: true
}
}
))
.pipe(gulp.dest(basePaths.assets+'css/'));
});
// Run:
// gulp minifyjs
// Minifies js files
gulp.task('minifyjs', function() {
return gulp.src(basePaths.assets+'js/bundle.js')
.pipe(plumber())
// .pipe(concat('bundle.min.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest(basePaths.assets+'js/'));
});
// Run:
// gulp clean
// Remove file
gulp.task('clean', function () {
return del([
'css/*',
// here we use a globbing pattern to match everything inside the `mobile` folder
'js/*.js',
// we don't want to clean this file though so we negate the pattern
'!css/*.min.css',
'!js/*.min.js'
]);
});
// Run:
// gulp imagemin
// Running image optimizing task
gulp.task('imagemin', function(){
gulp.src(basePaths.src+'img/**')
.pipe(imagemin())
.pipe(gulp.dest(basePaths.assets+'img/'))
});
// Run:
// gulp watch
// Starts watcher. Watcher runs gulp sass task on changes
gulp.task('watch', function () {
// gulp.watch(basePaths.src+'sass/**/*.scss', ['sass']);
gulp.watch(basePaths.src+'sass/**/*.scss', gulp.series('sass'));
gulp.watch(cssFileList,gulp.series('concat-css'));
gulp.watch(jsFileList,gulp.series('concat-js'));
gulp.watch(basePaths.src+'img/**', gulp.series('imagemin'));
//gulp.watch('browser-sync');
});
//task register
// gulp.task('default', ['watch', 'sass', 'concat-css', 'concat-js', 'browser-sync']);
// gulp.task('build', ['sass', 'concat-css', 'concat-js', 'minifycss', 'minifyjs', 'imagemin']);
gulp.task('default', gulp.series('watch', 'sass', 'concat-css', 'concat-js', 'browser-sync'));
gulp.task('build', gulp.series('sass', 'concat-css', 'concat-js', 'minifycss', 'minifyjs', 'imagemin'));

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.
I've tried creating the Dist folder manually
created a test.css file in the src directory
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"
]

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.

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');

Error when running gulp for transcompiling es6 to es5

I have a simple javascript file like this:
'use strict';
const sentences = [
{subject: 'Javascript', verb: 'is', object: 'great'}
{subject: 'Elephants', verb: 'are', object: 'large'}
];
function say ({subject, verb, object}){
console.log(`${subject} ${verb} ${object}`);
}
for(let s of sentences){
say(s);
}
And i`ve installed gulp for transcompiling purposes. Here's my gulp file:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function(){
gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});
My javascript file is inside a 'es6' and a 'public/es6' folders. So when i run the gulp command, it should work, but it gives me these errors instead:
Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
What am i missing here?

I think some of the packages were not installed or compatible, regardless of that, you should make sure all dev-dependencies are installed , source code are available on Babel documentation website [https://babeljs.io/setup];
so your package.json file and .baberlc file should look like this:
{
"name": "nu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0-beta.2"
}
}
{
"presets": ["#babel/preset-env"]
}
so run your code...it should work just fine!!!

grunt required config property missing

setting up a new project that will have multiple grunt tasks that I want to load from task files.
when running my first task, 'core' which is supposed to build the core css for the site, I'm getting an error that I can't seem to resolve. been doing some googling and not finding this specific issue. any issues with the same error message usually were the result of a typo or misplaced curly braces on the part of the OP. Not sure that's the case here, but perhaps someone else sees what I'm obviously not seeing.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
};
grunt-tasks/grunt-core.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.config('core', {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
}
});
grunt.registerTask('core', ['sass:dist']);
};
error:
$ grunt core
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.dist" missing. Use --force to continue.
Aborted due to warnings.
I've tried a few different things. If I change the registerTask to this:
grunt.registerTask('core', ['sass']);
I get this error:
$ grunt core
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
not sure if this is relevant, but here is package.json and some specs on the system I'm using.
Mac OSX Yosemite
node version v5.10.1
npm 3.8.3
package.json
{
"name": "TEST",
"version": "1.0.0",
"description": "test test test",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/path/to/repo"
},
"author": "me <me#example.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/path/to/repo/issues"
},
"homepage": "https://github.com/path/to/repo",
"devDependencies": {
"angular": "^1.5.5",
"bootstrap-sass": "^3.3.6",
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^1.1.0",
"jquery": "^2.2.3",
"sass-lint": "^1.5.1"
},
"dependencies": {
"jquery": "^2.2.3"
}
}

Looks like it was user error on my part.
in the task file, I had grunt.config(), but I should have had grunt.initConfig()
var taskConfig = {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
},
concat : {
core : {
src : ['node_modules/jquery/dist/jquery.js', 'js/main.js'],
dest : "../dev/js/main.js"
}
}
};
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig(taskConfig);
grunt.registerTask('core', ['concat:core','sass']);
};

Require not working the way I thought it would

So I have the following gulp task:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require("babelify");
gulp.task('make:flare-currency', function() {
return browserify({entries: [
'src/add-new-currency/flare-currency.js',
'src/add-new-currency/currencies/set_up_currencies.js'
]})
.transform(babelify)
.bundle()
.pipe(source('Flare-Currency.js'))
.pipe(gulp.dest('dist/flare/currency/'));
});
I have the following package.json:
{
"name": "flare-collection",
"description": "collection of scripts for the RPG Maker MV system.",
"version": "0.0.1",
"dependencies": {
"gulp": "3.9.0",
"browserify": "11.2.0",
"vinyl-source-stream": "1.1.0",
"babelify": "6.4.0",
"underscore.string": "2.3.0"
}
}
When I try to do, inside: src/add_new_currencies/flare_currency.js
var UnderScoreString = require('underscore.string/string');
I get:
Error: Cannot find module 'underscore.string/string' from
'/Users/AdamBalan/Documents/Flare-Collection/src/add_new_currencies'
All of my require statements require that I do: var bla = require('some/file/to/include.js')
All of my classes (I am using es6) have, at the bottom of the file: module.exports = ClassName;
Why am I getting this error?
More importantly, why do I have to include the path to the js file?

underscore.string don't have a string submodule (function). If You want load all packages try _s = require('underscore.string'). If You want load single module like slugify try slugify = require('underscore.string/slugify').
You don't need to include the path to the js file. If you select the directory, then node.js try to find index.js file.