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'));
Related
I start gulp task
ondrej#vostro-ov:~/o2kna/okna$ gulp
[09:34:23] Using gulpfile ~/o2kna/okna/gulpfile.js
[09:34:23] Starting 'default'...
[09:34:23] Starting 'styles'...
[09:34:23] No files matched your Sass source.
[09:34:23] Finished 'styles' after 15 ms
[09:34:23] Starting 'connect-sync'...
PHP 7.2.24-0ubuntu0.18.04.15 Development Server started at Tue Dec 20 09:34:23 2022
Listening on http://127.0.0.1:8000
Document root is /home/ondrej/o2kna/okna
Press Ctrl-C to quit.
[Tue Dec 20 09:34:23 2022] 127.0.0.1:54122 [404]: / - No such file or directory
[Browsersync] Proxying: http://okna.loc
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.120:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
From gulpfile.js
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
connect = require('gulp-connect-php'),
sass = require('gulp-ruby-sass'),
browserSync = require('browser-sync');
var output = './css';
var autoprefixerOptions = {
browsers: ['last 2 versions']
};
gulp.task('styles', function () {
return sass('/www/styles/frontModule/scss/index.scss', { style: 'compressed', sourcemap:true })
.pipe(sourcemaps.init())
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sourcemaps.write())
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest(output))
.pipe(browserSync.stream({ match: '**/*.css' }));
});
gulp.task('connect-sync', function () {
connect.server({}, function () {
browserSync({
proxy: 'okna.loc'
});
});
});
gulp.task('watch', function () {
gulp.watch("/www/styles/frontModule/scss/**", ['styles']);
gulp.watch(['js/**/*.js', '*.html', '**/*.php']).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('styles', 'connect-sync', function () {
gulp.start('watch');
}));
File package.json
{
"name": "guwii gulp",
"version": "1.0",
"description": "guwii's quick gulp setup",
"author": "guwii",
"main": "gulpfile.js",
"scripts": {
"test": "echo 'Error: no test specified' && exit 1"
},
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.24.5",
"gulp-autoprefixer": "^5.0.0",
"gulp-sourcemaps": "^2.6.4"
},
"dependencies": {
"gulp": "^3.9.1",
"gulp-connect-php": "^1.0.3",
"gulp-ruby-sass": "^4.0.0"
}
}
Folder and files structure in project have
root
www
styles
frontModule
scss
index.scss
gulpfile.js
I do not know where is error, but alert "No files matched your Sass source." is not correctly.
When I change "index.scss" file does not compile to css.
Gulp file I use from https://guwii.com/bytes/best-simple-gulp-setup-sass-browsersync-local-server/
Can any ideas what is wrong?
Thanks
Here is the output error window result below.
Failed to run "D:\TortSVN\Oil Diversity\Main Web App\LatsetOildiversity\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
fs.js:27
const { Math, Object } = primordials;
^
ReferenceError: primordials is not defined
at fs.js:27:26
at req_ (D:\TortSVN\Oil Diversity\Main Web App\LatsetOildiversity\node_modules\natives\index.js:143:24)
at Object.req [as require] (D:\TortSVN\Oil Diversity\Main Web App\LatsetOildiversity\node_modules\natives\index.js:55:10)
at Object.<anonymous> (D:\TortSVN\Oil Diversity\Main Web App\LatsetOildiversity\node_modules\graceful-fs\fs.js:1:37)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
Only showed a part of the error here above. Here is my version for npm and gulp below.
PM> npm -v
6.14.4
PM> gulp -v
CLI version: 2.3.0
Local version: 4.0.2
PM>
Here is my package.json content below.
{
"name": "odg",
"version": "1.0.0",
"description": "OD",
"main": "app/main.js",
"keywords": [],
"author": "Mohammad MalekMakan",
"private": true,
"devDependencies": {
"grunt": "^1.0.3",
"gulp": "3.9.0",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.0.0",
"gulp-durandal": "^1.1.7",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.0.2",
"gulp-livereload": "^3.8.0",
"gulp-minify": "0.0.14",
"gulp-minify-css": "^1.0.0",
"gulp-server-livereload": "^1.2.1",
"gulp-sourcemaps": "^1.5.1",
"gulp-util": "3.0.4",
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1",
"mout": "~1.0.0"
},
"dependencies": {
"grunt-cli": "1.2.0",
"natives": "^1.1.6"
}
}
Here is the content of gulp.js file.
/// <binding Clean='build' />
var gulp = require('gulp');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
var durandal = require('gulp-durandal');
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var path = require('path');
var server = require('gulp-server-livereload');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('copy', function() {
gulp.src('auth-complete*')
.pipe(gulp.dest('dist'));
});
gulp.task('js-watcher', function() {
gulp.src('./app/**/*.js')
.pipe(connect.reload());
});
gulp.task('less-watcher', function() {
gulp.src('./styles/**/*.less')
.pipe(connect.reload());
});
gulp.task('html-watcher', function() {
gulp.src('./app/**/*.html')
.pipe(connect.reload());
});
gulp.task('watch-all', ['analyze'], function(){
gulp.watch(['./app/**/*.html'], ['html-watcher']);
gulp.watch(['./app/**/*.js'], ['analyze', 'js-watcher']);
gulp.watch(['./styles/**/*.less'], ['less', 'less-watcher']);
});
gulp.task('default', [ 'analyze', 'less', 'connect', 'watch-all']);
gulp.task('build', ['analyze', 'less', 'durandal', 'copy']);
As i have searched plenty of solutions like this Gulpfile.js failed to load and this https://developercommunity.visualstudio.com/content/problem/961170/gulpfile-fails-to-load-after-upgrading-to-vs2019-1.html but nothing worked for me.
Found the solution it's not working on VS2019 v16.6.2 but instead, it's working on VS2017 as i installed lower series. Here is a screenshot below
The error I receive is:
Error: Cannot find module 'jquery' from 'F:...\newstyle\assets\lib\helper\html\img\js'
at
C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
at process (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
at load (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
at onex (C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
at C:\Users...\AppData\Roaming\npm\node_modules\browserify\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:153:21)
My directory structure is as follows:
newstyle/assets/npm/index.js
newstyle/assets/npm/package.json
newstyle/assets/npm/gulpfile.js
newstyle/assets/lib/helper/html/img/js/img.module.js
My package.json looks like this:
{
"name": "newstyle",
"version": "1.0.0",
"description": "styles and libraries",
"main": "index.js",
"dependencies": {
"#tschallacka/assetmanager": "^1.0.0",
"#tschallacka/jquery.oc.foundation": "^1.0.2",
"#tschallacka/jquery.render": "^1.0.0",
"#tschallacka/jquery.request": "^1.0.0",
"#tschallacka/oc.foundation.base": "^1.0.1",
"#tschallacka/oc.foundation.controlutils": "^1.0.1",
"#tschallacka/oc.foundation.request": "^1.0.0",
"animate.css": "^3.7.0",
"bootstrap-less": "^3.3.8",
"flexslider": "^2.7.2",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"jquery-touchswipe": "^1.6.19",
"jquery.easing": "^1.4.1",
"lazysizes": "^4.1.8",
"liquidslider": "git+https://git#github.com/KevinBatdorf/liquidslider.git",
"popper.js": "^1.15.0",
"sweetalert2": "^8.11.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
My index.js like this:
require('#tschallacka/oc.foundation.base');
require('#tschallacka/oc.foundation.controlutils');
// ====================== TROUBLE CAUSING LINE!! ==========================
require('../assets/lib/helper/html/img/js/img.module.js');
the code in newstyle/assets/lib/helper/html/img/js/img.module.js
var $ = require('jquery');
var Base = require('#tschallacka/oc.foundation.base');
var controlUtils = require('#tschallacka/oc.foundation.controlutils');
My gulpfile.js
'use strict';
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var log = require('gulplog');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
gulp.task('javascript', function () {
// set up the browserify instance on a task basis
var b = browserify({
entries: './index.js', // Source name
debug: true
});
return b.bundle()
.pipe(source('closure.js'))// Resulting filename
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', log.error)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('../js/'));
});
gulp.task('watch', function () {
gulp.watch('./*.less', ['less']);
});
gulp.task('less', function () {
return gulp.src('./style.less')
.pipe(less({
relativeUrls: true
}).on('error', function (err) {
console.log(err);
}))
.pipe(cssmin().on('error', function(err) {
console.log(err);
}))
.pipe(rename('closure.css'))
.pipe(gulp.dest('../css/'));
});
When I run this without the trouble causing line, everything works fine, it finds the modules and it compiles without a hitch. No problems with not finding the modules.
But when I require that script, the module I required as test from the "parent" script suddenly cannot be found anymore, even though it should still be in the cache by string name.
It does work if I 'require' the files by filename, but that's less than desirable because then I constantly need to check directory nesting.
What causes this and how can I resolve this?
Things I've tried:
setting basedir
var b = browserify({
entries: './index.js', // Source name
debug: true,
basedir: __dirname
});
npm update from 6.4.1 to 6.9.0
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade
updated gulp:
+ gulp#4.0.2
updated 6 packages in 19.938s
The solution is rather simple, but not easy to get to the conclusion what causes the error, you have to add node_modules to the 'paths' variable of browserify in your gulpfile.js
// set up the browserify instance on a task basis
var b = browserify({
entries: './index.js', // Source name
debug: true,
paths: ['./node_modules'] // <--- this line here
});
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');
I am new to gulp and I just create a gulpfile.js. I am trying to run gulp run but I am getting -bash: gulp: command not found
Not sure as to why this is happening as I have it installed locally.
package.json:
{
"name": "taglr",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack --config webpack.config.js && node ./build/index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"deepmerge": "^0.2.10",
"glue": "^3.2.0",
"hapi": "^13.2.1",
"jquery": "^2.2.1",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"extract-text-webpack-plugin": "^1.0.1",
"gulp": "^3.9.1",
"nodemon": "^1.9.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
gulpfile.js:
var gulp = require('gulp');
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var DeepMerge = require('deep-merge');
var nodemon = require('nodemon');
// for excluding the building of node_modules in the backend
var nodeModules = {};
fs.readdirSync('node_modules').filter(function(x) {
return ['.bin'].indexOf(x) === -1;
}).forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
// generic config
var defaultConfig = {
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
'react',
'es2015'
]
}
}
]
}
};
// if not production build
if (process.env.NODE_ENV !== 'production') {
defaultConfig.devtool = '#eval-source-map';
defaultConfig.debug = true
}
// build config using overrides
function buildConfig(config) {
return DeepMerge(defaultConfig, config || {});
}
var backendConfig = buildConfig({
entry: path.resolve(__dirname, "server/server.js"),
// tells webpack not to touch any built-in modules
target: "node",
externals: nodeModules,
output: {
path: path.resolve(__dirname, "build"),
filename: 'index.js'
},
pluguns: [
]
});
var host = "localhost";
var port = 3000;
var frontendConfig = buildConfig({
entry: path.resolve(__dirname, "app/index.js"),
output: {
path: path.resolve(__dirname, "public/bundle"),
filename: "main.js"
// publicPath: 'http://' + host + ':' + port + 'pubic/bundle'
},
plugins: [
]
});
function onBuild(done) {
return function(err, stats) {
if (err) {
console.log("ERROR: " + err);
} else {
console.log(stats.toString());
}
if (done) {
done();
}
}
}
// build frontend
gulp.task('build-frontend', function(done) {
webpack(frontendConfig).run(onBuild(done));
});
// watch frontend
gullp.task('watch-frontend', function(done) {
webpack(frontendConfig).watch(100, onBuild());
});
// build backend
gulp.task('build-backend', function(done) {
webpack(backendConfig).run(onBuild(done));
});
// watch backend
gullp.task('watch-backend', function(done) {
webpack(backendConfig).watch(100, function(err, stats) {
onBuild()(err, stats);
nodemon.restart();
});
});
gulp.task('build', ['build-frontend', 'build-backend']);
gulp.task('watch', ['watch-frontend', 'watch-backend']);
gulp.task('run', ['watch-frontend', 'watch-backend'], function() {
nodemon({
execMap: {
js: 'node'
},
script: 'build/index.js',
ext: 'js html'
})
});
The problem is that executable gulp isn't found in any directories of your $PATH. If you install it globally, it will be copied in /usr/lib/node_modules or some other directory in your $PATH (depending on your distro), so just use:
npm install -g gulp-cli
Or if you can't use sudo on that machine, you can install it to your project package.json:
npm install --save-dev gulp-cli
Link it:
ln -s node_modules/.bin/gulp gulp
Execute it by using the local symlink:
./gulp run