$ is not defined in Gulp task - gulp

I have the following package.json file:
{
"name": "ASP.NET",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-inject": "1.5.0",
"gulp-util": "3.0.6",
"gulp-print": "1.1.0",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"gulp-load-plugins": "0.9.0",
"del": "1.2.0",
"wiredep": "3.0.0-beta",
"jshint": "2.8.0",
"jshint-stylish": "2.0.1"
}
}
var gulp = require('gulp'),
util = require('gulp-util'),
print = require('gulp-print'),
inject = require('gulp-inject'),
del = require('del'),
cssmin = require('gulp-cssmin'),
jshint = require('gulp-jshint')
uglify = require('gulp-uglify'),
wiredep = require('wiredep').stream,
bowerJson = require('./bower.json')
gulp = require('gulp'),
project = require('./project.json');
gulp.task('wiredep', function () {
log('Placing Bower Components from ' + paths.bowerComponents + ' in ' + paths.layoutPage)
return gulp
.src(paths.layoutPage)
.pipe(wiredep({
bowerJson: bowerJson,
directory: paths.bowerComponents,
ignorePath: '../..'
}))
.pipe($.inject(gulp.src([
paths.jsMain,
paths.jsContent])))
.pipe(gulp.dest(paths.layoutPage));
});
When I run this task for a bower.json I get the error:
[16:11:31] Using gulpfile C:\MyProject\src\MyProject\Gulpfile.js
[16:11:31] Starting 'wiredep'...
[16:11:31] Placing Bower Components from ./bower_components/ in ./Views/Shared/_Layout.cshtml
[16:11:31] 'wiredep' errored after 5.7 ms
Process terminated with code 1.
[16:11:31] ReferenceError: $ is not defined
Why is $ not defined and how can I get it defined?
What I tried is adding "jquery": "2.1.4", to devDependencies in package.json.

By reading the gulpfile.js part of the gulp-inject documentation I discovered that I do not need to put a $ in front of it. Requiring inject and referencing it directly works. E.g.,
var inject = require('gulp-inject'),
gulp.task('inject', ['wiredep'], function () {
log('Wire up the css and js into ' + paths.layoutPage);
return gulp
.src(paths.layoutPage)
.pipe(inject(gulp.src([paths.js, paths.css], { read: false }), { ignorePath: project.webroot }))
.pipe(gulp.dest(paths.layoutPagePath));
});
Using $ directly can I think be done with var $ = require('jquery') and adding jquery to package.json. Correct me if I'm wrong.

Just now my project also happend this phenomenon.Last I found the gulp lack of a plugins named 'gulp-load-plugins';
After install it we should state it for put all the plugins from package.json into the $ charactor;It is var $=require('gulp-load-plugins')();

Related

Migration from gulp v3 to v4 [duplicate]

I'm trying to run the command below but unfortunately I run into errors.
$ gulp build
In my terminal and I get this assertion error. I've uninstalled node and NPM and reinstalled again using brew - How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X) with these steps. My node version is v10.5.0 and npm version is 6.1.0.
My system is MacOS High Sierra 10.13.2
assert.js:269
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (bulkit/startup-kit/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (startup-kit/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous>
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
package.json
{
"name": "bulkit-startup",
"version": "0.0.1",
"description": "Bulkit Startup Kit",
"main": "Gruntfile.js",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.24.5",
"gulp": "^4.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-postcss": "^6.1.0",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"jquery": "^3.3.1",
"mq4-hover-shim": "^0.3.0",
"panini": "^1.3.0",
"rimraf": "^2.5.2"
},
"engines": {
"node": ">=0.10.1"
},
"scripts": {
"start": "gulp",
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "https://github.com/cssninjaStudio/bulkit.git"
},
"bugs": {
"url": "https://github.com/cssninjaStudio/bulkit/issues",
"email": "support#cssninja.io"
},
"author": "Css Ninja <hello#cssninja.io> (https://cssninja.io/themes/bulkit)",
"license": "Commercial",
"private": true,
"dependencies": {
"bulma": "^0.7.0",
"del": "^3.0.0",
"jquery-waypoints": "^2.0.5",
"jquery.counterup": "^2.1.0",
"scrollreveal": "^3.4.0",
"slick-carousel": "^1.8.1",
"wallop": "^2.4.1"
}
}
gulpfile.js
var gulp = require('gulp');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mq4HoverShim = require('mq4-hover-shim');
var rimraf = require('rimraf').sync;
var browser = require('browser-sync');
var panini = require('panini');
var concat = require('gulp-concat');
var port = process.env.SERVER_PORT || 8080;
var nodepath = 'node_modules/';
var assetspath = 'assets/';
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
// Watch files for changes
gulp.task('watch', function() {
gulp.watch('scss/**/*', ['compile-scss', browser.reload]);
gulp.watch('sass/**/*', ['compile-sass', browser.reload]);
gulp.watch('js/**/*', ['copy-js', browser.reload]);
gulp.watch('images/**/*', ['copy-images', browser.reload]);
gulp.watch('html/pages/**/*', ['compile-html']);
gulp.watch(['html/{layouts,includes,helpers,data}/**/*'], ['compile-html:reset','compile-html']);
gulp.watch(['./src/{layouts,partials,helpers,data}/**/*'], [panini.refresh]);
});
// Erases the dist folder
gulp.task('reset', function() {
rimraf('bulma/*');
rimraf('scss/*');
rimraf('assets/css/*');
rimraf('assets/fonts/*');
rimraf('images/*');
});
// Erases the dist folder
gulp.task('clean', function() {
rimraf('_site');
});
// Copy Bulma filed into Bulma development folder
gulp.task('setupBulma', function() {
//Get Bulma from node modules
gulp.src([nodepath + 'bulma/*.sass']).pipe(gulp.dest('bulma/'));
gulp.src([nodepath + 'bulma/**/*.sass']).pipe(gulp.dest('bulma/'));
});
// Copy static assets
gulp.task('copy', function() {
//Copy other external font and data assets
gulp.src(['assets/fonts/**/*']).pipe(gulp.dest('_site/assets/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/fonts/**/*']).pipe(gulp.dest('_site/assets/css/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/ajax-loader.gif']).pipe(gulp.dest('_site/assets/css/'));
});
//Theme Sass variables
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: [nodepath + 'bulma/sass']
};
//Theme Scss variables
var scssOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: ['./scss/partials']
};
// Compile Bulma Sass
gulp.task('compile-sass', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./bulma/bulma.sass')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Theme Scss
gulp.task('compile-scss', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./scss/core.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Html
gulp.task('compile-html', function() {
gulp.src('html/pages/**/*.html')
.pipe(panini({
root: 'html/pages/',
layouts: 'html/layouts/',
partials: 'html/includes/',
helpers: 'html/helpers/',
data: 'html/data/'
}))
.pipe(gulp.dest('_site'))
.on('finish', browser.reload);
});
gulp.task('compile-html:reset', function(done) {
panini.refresh();
done();
});
// Compile css from node modules
gulp.task('compile-css', function() {
return gulp.src([
nodepath + 'slick-carousel/slick/slick.css',
nodepath + 'slick-carousel/slick/slick-theme.css',
nodepath + 'wallop/css/wallop.css',
//Additional static css assets
assetspath + 'css/icons.min.css',
])
.pipe(concat('app.css'))
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile js from node modules
gulp.task('compile-js', function() {
return gulp.src([
nodepath + 'jquery/dist/jquery.min.js',
nodepath + 'slick-carousel/slick/slick.min.js',
nodepath + 'scrollreveal/dist/scrollreveal.min.js',
nodepath + 'waypoints/lib/jquery.waypoints.min.js',
nodepath + 'waypoints/lib/shortcuts/sticky.min.js',
nodepath + 'jquery.counterup/jquery.counterup.min.js',
nodepath + 'wallop/js/Wallop.min.js',
//Additional static js assets
assetspath + 'js/ggpopover/ggpopover.min.js',
assetspath + 'js/ggpopover/ggtooltip.js',
assetspath + 'js/embed/embed.js',
assetspath + 'js/gmap/gmap.min.js',
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy Theme js to production site
gulp.task('copy-js', function() {
gulp.src('js/**/*.js')
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy images to production site
gulp.task('copy-images', function() {
gulp.src('images/**/*')
.pipe(gulp.dest('./_site/assets/images/'));
});
gulp.task('init', ['setupBulma']);
gulp.task('build', ['clean','copy', 'compile-js', 'compile-css', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-images']);
gulp.task('default', ['server', 'watch']);
Gulp 4.0 has changed the way that tasks should be defined if the task depends on another task to execute. The list parameter has been deprecated.
An example from your gulpfile.js would be:
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
Instead of the list parameter they have introduced gulp.series() and gulp.parallel().
This task should be changed to something like this:
// Starts a BrowerSync instance
gulp.task('server', gulp.series('build', function(){
browser.init({server: './_site', port: port});
}));
I'm not an expert in this. You can see a more robust example in the gulp documentation for running tasks in series or these following excellent blog posts by Jhey Thompkins and Stefan Baumgartner
https://codeburst.io/switching-to-gulp-4-0-271ae63530c0
https://fettblog.eu/gulp-4-parallel-and-series/
Try replacing your last line of gulpfile.js
gulp.task('default', ['server', 'watch']);
with
gulp.task('default', gulp.series('server', 'watch'));
Lower your gulp version in package.json file to 3.9.1-
"gulp": "^3.9.1",
You don't need to downgrade your gulp from gulp 4. Use gulp.series() to combine multiple tasks. At first install gulp globally with
npm install --global gulp-cli
and then install locally on your working directory with
npm install --save-dev gulp
see details here
Example:
package.json
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3",
"gulp": "^4.0.0",
"gulp-sass": "^4.0.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.7"
}
}
gulpfile.js
var gulp = require("gulp");
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// Specific Task
function js() {
return gulp
.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest('src/js'))
.pipe(browserSync.stream());
}
gulp.task(js);
// Specific Task
function gulpSass() {
return gulp
.src(['src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
}
gulp.task(gulpSass);
// Run multiple tasks
gulp.task('start', gulp.series(js, gulpSass));
Run gulp start to fire multiple tasks & run gulp js or gulp gulpSass for specific task.
https://fettblog.eu/gulp-4-parallel-and-series/
Because
gulp.task(name, deps, func) was replaced by gulp.task(name, gulp.{series|parallel}(deps, func)).
You are using the latest version of gulp but older code. Modify the code or downgrade.
I get the same error when using Gulp. The solution is to switch to Gulp version 3.9.1, both for the local version and the CLI version.
sudo npm install -g gulp#3.9.1
Run in the project's folder
npm install gulp#3.9.1
The problem is that you are using gulp 4 and the syntax in gulfile.js is of gulp 3. So either downgrade your gulp to 3.x.x or make use of gulp 4 syntaxes.
Syntax Gulp 3:
gulp.task('default', ['sass'], function() {....} );
Syntax Gulp 4:
gulp.task('default', gulp.series(sass), function() {....} );
You can read more about gulp and gulp tasks on:
https://medium.com/#sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81
Replace the array in:
gulp.task('default', ['task1', 'task2','task3']);
with gulp.series()
gulp.task('default', gulp.series('task1', 'task2','task3'));
It's not good to keep changing the gulp & npm versions in-order to fix the errors. I was getting several exceptions last days after reinstall my working machine. And wasted tons of minutes to re-install & fixing those.
So, I decided to upgrade all to latest versions:
npm -v : v12.13.0
node -v : 6.13.0
gulp -v : CLI version: 2.2.0 Local version: 4.0.2
This error is getting because of the how it has coded in you gulpfile but not the version mismatch.
So, Here you have to change 2 things in the gulpfile to aligned with Gulp version 4.
Gulp 4 has changed how initiate the task than Version 3.
In version 4, you have to defined the task as a function, before call it as a gulp task by it's string name. In V3:
gulp.task('serve', ['sass'], function() {..});
But in V4 it should be like:
function serve() {
...
}
gulp.task('serve', gulp.series(sass));
As #Arthur has mentioned, you need to change the way of passing arguments to the task function. It was like this in V3:
gulp.task('serve', ['sass'], function() {
...
});
But in V4, it should be:
gulp.task('serve', gulp.series(sass));
While migrating from Gulp 3.x to Gulp 4.x, these are the common errors we are getting:
Errors:
AssertionError [ERR_ASSERTION]: Task function must be specified
AssertionError [ERR_ASSERTION]: Task never defined:
The following tasks did not complete: Did you forget to signal async completion?
Here are few points to take care regarding task definition and execution:
First define task
Use return
Then execute with gulp.series()
Here, is the quick Gulp code which is working with Gulp v4:
// First define task with Return
gulp.task('css-minify', function () {
return gulp.src('assets/images/*.*')
.pipe(smushit({verbose: true}))
.pipe(gulp.dest('assets/images'));
});
// Then execute task with bracket '()' instead of '[]'
gulp.task('default', gulp.series('css-minify'));
Replacing [] with gulp.series() definitely worked to me, and another change I've needed to do was to move my main task 'Ex. gulp main-task' to the end of the Gulp file using Gulp v4.02
worked after updating gulp.task() with gulp.task( gulp.series() );
Steps:
"gulp": "^3.9.1",
npm install
gulp styles

Gulp watch() method is not watching file changes

I am trying to automate some tasks with Gulp for Wordpress theme development. I have managed to get everything to work, except that gulp.watch doesn't watch for changes on my files automatically.
Gulp Version:
CLI version 2.0.1
Local version 3.9.1
Operating System:
Windows 10
Package.json:
{
"name": "theme-development-boilerplate",
"version": "1.0.0",
"description": "A boilerplate for Theme Development automated with Gulp. Includes SASS, Bootstrap, jQuery, Normalize, Mordernizer, among other stacks",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Manuel Abascal",
"license": "MIT",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-error-notifier": "^1.1.0",
"gulp-imagemin": "^5.0.3",
"gulp-livereload": "^4.0.1",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.1"
},
"dependencies": {
"browser-sync": "^2.26.3",
"gulp-watch": "^5.0.1"
}
}
Gulpfile:
var gulp = require('gulp');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
var uglify = require('gulp-uglify');
var errorNotifier = require('gulp-error-notifier');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
// Logs Message
gulp.task('message', function(){
return console.log('Gulp is running...');
});
// Optimize Images
gulp.task('imageMin', function (){
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
});
// Minify JS
gulp.task('minify', function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// Compile Sass into CSS
gulp.task('sass', function(){
gulp.src('src/sass/*.scss')
.pipe(errorNotifier.handleError(sass({outputStyle: 'compressed'})).on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
// Scripts Concatenation
gulp.task('scripts', function(){
gulp.src('src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['message', 'imageMin', 'sass', 'scripts']);
gulp.task('watch', function(){
gulp.watch('src/js/*.js', ['scripts']);
gulp.watch('src/images/*', ['imageMin']);
gulp.watch('src/sass/*.scss', ['sass']);
});
When I use the command gulp it works like a charm, however when I run gulp watch I get this output in the console:
Starting 'watch'...
Finished 'watch' after 12 ms
But it doesn't watch for anything. Any ideas on how to debug this? I read that Windows Operating System might be the issue or the version. I don't know at this point.
Thanks in advance!
There is no problem with windows, I use gulp on windows on a daily basis.
And about the version, I don't think that is the culprit here either, but you should update to the latest version anyway (which is 4.0.0).
Try using a function in your watch instead of a task, like this:
(This is what's done in the official examples here, and also what I do and it works)
// Scripts Concatenation
function transpile_scripts(cb) {
gulp.src('src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.on('end', cb);
}
gulp.watch('src/js/*.js', transpile_scripts)
Also note that I passed a callback to my function, and I run it after the pipe is finished. This callback is provided implicitly by gulp, and it sort of keeps track of when a task is finished. In some cases not passing and executing this causes warnings and even errors. Anyway, it won't harm to do it just in case.

Everytime I run gulp anything, I get a assertion error. - Task function must be specified

I'm trying to run the command below but unfortunately I run into errors.
$ gulp build
In my terminal and I get this assertion error. I've uninstalled node and NPM and reinstalled again using brew - How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X) with these steps. My node version is v10.5.0 and npm version is 6.1.0.
My system is MacOS High Sierra 10.13.2
assert.js:269
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (bulkit/startup-kit/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (startup-kit/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous>
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
package.json
{
"name": "bulkit-startup",
"version": "0.0.1",
"description": "Bulkit Startup Kit",
"main": "Gruntfile.js",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.24.5",
"gulp": "^4.0.0",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-postcss": "^6.1.0",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"jquery": "^3.3.1",
"mq4-hover-shim": "^0.3.0",
"panini": "^1.3.0",
"rimraf": "^2.5.2"
},
"engines": {
"node": ">=0.10.1"
},
"scripts": {
"start": "gulp",
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "https://github.com/cssninjaStudio/bulkit.git"
},
"bugs": {
"url": "https://github.com/cssninjaStudio/bulkit/issues",
"email": "support#cssninja.io"
},
"author": "Css Ninja <hello#cssninja.io> (https://cssninja.io/themes/bulkit)",
"license": "Commercial",
"private": true,
"dependencies": {
"bulma": "^0.7.0",
"del": "^3.0.0",
"jquery-waypoints": "^2.0.5",
"jquery.counterup": "^2.1.0",
"scrollreveal": "^3.4.0",
"slick-carousel": "^1.8.1",
"wallop": "^2.4.1"
}
}
gulpfile.js
var gulp = require('gulp');
var clean = require('gulp-clean');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var mq4HoverShim = require('mq4-hover-shim');
var rimraf = require('rimraf').sync;
var browser = require('browser-sync');
var panini = require('panini');
var concat = require('gulp-concat');
var port = process.env.SERVER_PORT || 8080;
var nodepath = 'node_modules/';
var assetspath = 'assets/';
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
// Watch files for changes
gulp.task('watch', function() {
gulp.watch('scss/**/*', ['compile-scss', browser.reload]);
gulp.watch('sass/**/*', ['compile-sass', browser.reload]);
gulp.watch('js/**/*', ['copy-js', browser.reload]);
gulp.watch('images/**/*', ['copy-images', browser.reload]);
gulp.watch('html/pages/**/*', ['compile-html']);
gulp.watch(['html/{layouts,includes,helpers,data}/**/*'], ['compile-html:reset','compile-html']);
gulp.watch(['./src/{layouts,partials,helpers,data}/**/*'], [panini.refresh]);
});
// Erases the dist folder
gulp.task('reset', function() {
rimraf('bulma/*');
rimraf('scss/*');
rimraf('assets/css/*');
rimraf('assets/fonts/*');
rimraf('images/*');
});
// Erases the dist folder
gulp.task('clean', function() {
rimraf('_site');
});
// Copy Bulma filed into Bulma development folder
gulp.task('setupBulma', function() {
//Get Bulma from node modules
gulp.src([nodepath + 'bulma/*.sass']).pipe(gulp.dest('bulma/'));
gulp.src([nodepath + 'bulma/**/*.sass']).pipe(gulp.dest('bulma/'));
});
// Copy static assets
gulp.task('copy', function() {
//Copy other external font and data assets
gulp.src(['assets/fonts/**/*']).pipe(gulp.dest('_site/assets/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/fonts/**/*']).pipe(gulp.dest('_site/assets/css/fonts/'));
gulp.src([nodepath + 'slick-carousel/slick/ajax-loader.gif']).pipe(gulp.dest('_site/assets/css/'));
});
//Theme Sass variables
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: [nodepath + 'bulma/sass']
};
//Theme Scss variables
var scssOptions = {
errLogToConsole: true,
outputStyle: 'compressed',
includePaths: ['./scss/partials']
};
// Compile Bulma Sass
gulp.task('compile-sass', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./bulma/bulma.sass')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Theme Scss
gulp.task('compile-scss', function () {
var processors = [
mq4HoverShim.postprocessorFor({ hoverSelectorPrefix: '.is-true-hover ' }),
autoprefixer({
browsers: [
"Chrome >= 45",
"Firefox ESR",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
})//,
//cssnano(),
];
//Watch me get Sassy
return gulp.src('./scss/core.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile Html
gulp.task('compile-html', function() {
gulp.src('html/pages/**/*.html')
.pipe(panini({
root: 'html/pages/',
layouts: 'html/layouts/',
partials: 'html/includes/',
helpers: 'html/helpers/',
data: 'html/data/'
}))
.pipe(gulp.dest('_site'))
.on('finish', browser.reload);
});
gulp.task('compile-html:reset', function(done) {
panini.refresh();
done();
});
// Compile css from node modules
gulp.task('compile-css', function() {
return gulp.src([
nodepath + 'slick-carousel/slick/slick.css',
nodepath + 'slick-carousel/slick/slick-theme.css',
nodepath + 'wallop/css/wallop.css',
//Additional static css assets
assetspath + 'css/icons.min.css',
])
.pipe(concat('app.css'))
.pipe(gulp.dest('./_site/assets/css/'));
});
// Compile js from node modules
gulp.task('compile-js', function() {
return gulp.src([
nodepath + 'jquery/dist/jquery.min.js',
nodepath + 'slick-carousel/slick/slick.min.js',
nodepath + 'scrollreveal/dist/scrollreveal.min.js',
nodepath + 'waypoints/lib/jquery.waypoints.min.js',
nodepath + 'waypoints/lib/shortcuts/sticky.min.js',
nodepath + 'jquery.counterup/jquery.counterup.min.js',
nodepath + 'wallop/js/Wallop.min.js',
//Additional static js assets
assetspath + 'js/ggpopover/ggpopover.min.js',
assetspath + 'js/ggpopover/ggtooltip.js',
assetspath + 'js/embed/embed.js',
assetspath + 'js/gmap/gmap.min.js',
])
.pipe(concat('app.js'))
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy Theme js to production site
gulp.task('copy-js', function() {
gulp.src('js/**/*.js')
.pipe(gulp.dest('./_site/assets/js/'));
});
//Copy images to production site
gulp.task('copy-images', function() {
gulp.src('images/**/*')
.pipe(gulp.dest('./_site/assets/images/'));
});
gulp.task('init', ['setupBulma']);
gulp.task('build', ['clean','copy', 'compile-js', 'compile-css', 'copy-js', 'compile-sass', 'compile-scss', 'compile-html', 'copy-images']);
gulp.task('default', ['server', 'watch']);
Gulp 4.0 has changed the way that tasks should be defined if the task depends on another task to execute. The list parameter has been deprecated.
An example from your gulpfile.js would be:
// Starts a BrowerSync instance
gulp.task('server', ['build'], function(){
browser.init({server: './_site', port: port});
});
Instead of the list parameter they have introduced gulp.series() and gulp.parallel().
This task should be changed to something like this:
// Starts a BrowerSync instance
gulp.task('server', gulp.series('build', function(){
browser.init({server: './_site', port: port});
}));
I'm not an expert in this. You can see a more robust example in the gulp documentation for running tasks in series or these following excellent blog posts by Jhey Thompkins and Stefan Baumgartner
https://codeburst.io/switching-to-gulp-4-0-271ae63530c0
https://fettblog.eu/gulp-4-parallel-and-series/
Try replacing your last line of gulpfile.js
gulp.task('default', ['server', 'watch']);
with
gulp.task('default', gulp.series('server', 'watch'));
Lower your gulp version in package.json file to 3.9.1-
"gulp": "^3.9.1",
You don't need to downgrade your gulp from gulp 4. Use gulp.series() to combine multiple tasks. At first install gulp globally with
npm install --global gulp-cli
and then install locally on your working directory with
npm install --save-dev gulp
see details here
Example:
package.json
{
"name": "gulp-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3",
"gulp": "^4.0.0",
"gulp-sass": "^4.0.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.7"
}
}
gulpfile.js
var gulp = require("gulp");
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// Specific Task
function js() {
return gulp
.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
.pipe(gulp.dest('src/js'))
.pipe(browserSync.stream());
}
gulp.task(js);
// Specific Task
function gulpSass() {
return gulp
.src(['src/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
}
gulp.task(gulpSass);
// Run multiple tasks
gulp.task('start', gulp.series(js, gulpSass));
Run gulp start to fire multiple tasks & run gulp js or gulp gulpSass for specific task.
https://fettblog.eu/gulp-4-parallel-and-series/
Because
gulp.task(name, deps, func) was replaced by gulp.task(name, gulp.{series|parallel}(deps, func)).
You are using the latest version of gulp but older code. Modify the code or downgrade.
I get the same error when using Gulp. The solution is to switch to Gulp version 3.9.1, both for the local version and the CLI version.
sudo npm install -g gulp#3.9.1
Run in the project's folder
npm install gulp#3.9.1
The problem is that you are using gulp 4 and the syntax in gulfile.js is of gulp 3. So either downgrade your gulp to 3.x.x or make use of gulp 4 syntaxes.
Syntax Gulp 3:
gulp.task('default', ['sass'], function() {....} );
Syntax Gulp 4:
gulp.task('default', gulp.series(sass), function() {....} );
You can read more about gulp and gulp tasks on:
https://medium.com/#sudoanushil/how-to-write-gulp-tasks-ce1b1b7a7e81
Replace the array in:
gulp.task('default', ['task1', 'task2','task3']);
with gulp.series()
gulp.task('default', gulp.series('task1', 'task2','task3'));
It's not good to keep changing the gulp & npm versions in-order to fix the errors. I was getting several exceptions last days after reinstall my working machine. And wasted tons of minutes to re-install & fixing those.
So, I decided to upgrade all to latest versions:
npm -v : v12.13.0
node -v : 6.13.0
gulp -v : CLI version: 2.2.0 Local version: 4.0.2
This error is getting because of the how it has coded in you gulpfile but not the version mismatch.
So, Here you have to change 2 things in the gulpfile to aligned with Gulp version 4.
Gulp 4 has changed how initiate the task than Version 3.
In version 4, you have to defined the task as a function, before call it as a gulp task by it's string name. In V3:
gulp.task('serve', ['sass'], function() {..});
But in V4 it should be like:
function serve() {
...
}
gulp.task('serve', gulp.series(sass));
As #Arthur has mentioned, you need to change the way of passing arguments to the task function. It was like this in V3:
gulp.task('serve', ['sass'], function() {
...
});
But in V4, it should be:
gulp.task('serve', gulp.series(sass));
While migrating from Gulp 3.x to Gulp 4.x, these are the common errors we are getting:
Errors:
AssertionError [ERR_ASSERTION]: Task function must be specified
AssertionError [ERR_ASSERTION]: Task never defined:
The following tasks did not complete: Did you forget to signal async completion?
Here are few points to take care regarding task definition and execution:
First define task
Use return
Then execute with gulp.series()
Here, is the quick Gulp code which is working with Gulp v4:
// First define task with Return
gulp.task('css-minify', function () {
return gulp.src('assets/images/*.*')
.pipe(smushit({verbose: true}))
.pipe(gulp.dest('assets/images'));
});
// Then execute task with bracket '()' instead of '[]'
gulp.task('default', gulp.series('css-minify'));
Replacing [] with gulp.series() definitely worked to me, and another change I've needed to do was to move my main task 'Ex. gulp main-task' to the end of the Gulp file using Gulp v4.02
worked after updating gulp.task() with gulp.task( gulp.series() );
Steps:
"gulp": "^3.9.1",
npm install
gulp styles

Uncaught ReferenceError: require is not defined when bundling js files

I am getting this error when I am minifying and bundling some js libraries with a gulp script (I am replicating the Hot Towel Angular nuget package from John Pappa).
site.min.js:81109 Uncaught ReferenceError: require is not defined
Here is the bower.json file
{
"name": "chainmanagerprovider",
"private": true,
"dependencies": {
"jQuery": "^3.1.0",
"jquery-validation": "^1.15.1",
"jquery-validation-unobtrusive": "^3.2.6",
"modernizr": "^3.3.1",
"bootstrap": "^3.3.7",
"respond": "respond-minmax#^1.4.2",
"angular": "^1.5.8",
"angular-animate": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-sanitize": "^1.5.8",
"angular-ui-router": "^0.3.1",
"moment": "^2.14.1",
"spin": "^1.1.6",
"toastr": "^2.1.3",
"font-awesome": "font-awsome#^4.6.3",
"jquery": "^3.1.0",
"angular-route": "^1.5.8",
"angular-bootstrap": "^2.1.2",
"install": "^1.0.4",
"spin.js": "spin-js#^2.0.1",
"ui-bootstrap": "^2.1.2"
},
"resolutions": {
"jquery": "3.1.0"
}
}
and my gulpfile.js
var gulp = require('gulp'),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
debug = require("gulp-debug"),
uglify = require("gulp-uglify"),
filter = require("gulp-filter"),
mainBowerFiles = require('main-bower-files');
var flatten = require('gulp-flatten');
var paths = {};
paths.baseReleaseFolder = "Bundle";
paths.baseJSReleaseFile = "js/site.min.js";
paths.baseCSReleaseFile = "css/site.min.css";
paths.jsSource = mainBowerFiles()//this gets all your bower scripts in an array
.concat([
"Scripts/spcontext.js",//generated by MY typescript compiler
"!/Scripts", //this is an exclude
"!**/*.min.js" //also an exclude
]);
gulp.task("min:js", function () {
var jsFilter = filter('**/*.js', { restore: true });//extra file safty incase my glob is getting non js files somehow
return gulp
.src(paths.jsSource) //this is the 'glob' IE the file selector
.pipe(jsFilter) //enforce my filter from above (gulp-filter)
.pipe(debug()) //useful to output what files are in use (gulp-debug)
.pipe(uglify()) //min and ugilfy files on the way to next step (gulp-uglify)
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) //this takes all the files in the glob and creates a single file out of them in app/site.min.js
.pipe(gulp.dest(".")) //write the final site.min.js to its location
.pipe(jsFilter.restore); //not sure but all filter examples do this.
});
gulp.task("min:css", function () {
var cssFilter = filter('**/*.css', { restore: true });
return gulp
.src(['bower_components/**/*.css', 'Content/**/*.css', "!bower_components/**/*.min.css", '!Content/**/*.min.css'])
.pipe(flatten())
.pipe(debug())
.pipe(cssmin())
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseCSReleaseFile))
.pipe(gulp.dest("."))
.pipe(cssFilter.restore);
});
gulp.task("fontawesome", function () {
return gulp
.src('bower_components/font-awesome/fonts/*')
.pipe(flatten())
.pipe(debug())
.pipe(gulp.dest("Bundle/fonts"))
});
gulp.task("bundle", ["min:css", "min:js", "fontawesome"]);
The script does all the bundling as expected and the files are there. When I run the page, I get the above error at this line
require('./dist/ui-bootstrap-tpls');
I am using Angular bootstrap and it seems I need an additional step to handle this library. I have read around on browserify, but I am having a trouble grasping what I need to do to my script.

Compile sass with gulp-sass

I'm trying to compile some .scss with the following Gulp task:
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require('gulp-sass');
var paths = {
webroot: "./wwwroot/"
};
paths.sass = paths.webroot + "lib/foundation-apps/scss/**/*.scss";
gulp.task('sass', function () {
gulp.src(paths.sass)
.pipe(sass())
.pipe(gulp.dest(paths.webroot + '/css/'));
});
This is the output of the command:
but the following is the compile result:
Why only the foundation.scss is compiled?
Check the structure of the bower.json file for foundation-apps (in package folder).
If it's the same found on the project github repo, should be something like this:
...
"main": [
"scss/foundation.scss",
"dist/js/foundation-apps.js",
"dist/js/foundation-apps-templates.js"
],
...
which means that only the scss/foundation.scss file will be compiled.
If you want to specify other files, you should create a override on your app bower.json file (on your root path)
Try to append to the end of the file something like this:
...
"overrides": {
"foundation-apps": {
"main": [
"scss/foundation.scss",
... (all the other files you want) ...
"dist/js/foundation-apps.js",
"dist/js/foundation-apps-templates.js"
]
}
}
...
In this way, you can update your versions without override your custom config (for the package folder default bower.json)
hope it helps.