Visual Studio Code: gulp is not recognized, added to path - json

I trying to set up an project with pre processing with gulp in Visual Studio Code.
I have installed gulp using npm: npm install gulp --save en installed it also globally.
Added some tasks in my gulpfile.js and filled the tasks.json file in Studio Code with details.
When I run the scripts, Studio keep saying 'gulp is not recognized as an internal of external command'. I have add 'NODE_PATH' as system variabele, and i'm able to start gulp manually via command line. (npm run gulp).
What I'm doing wrong?
What I did so far:
Added script: gulp:gulp to my package.json (as seen on https://stackoverflow.com/a/32569658/4548006)
Installed modules:
npm
gulp
gulp-styles
gulp-uglify
gulp-pug
gulp-pug2
gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');
var pug = require('gulp-pug2');
var stylus = require('gulp-stylus');
gulp.task('default', function(){
gulp.watch([
'app/app.js',
'app/routes/routes.js',
'app/controllers/**.js',
'app/directives/**.js',
'app/services/**.js',
'app/libs/**.js',], ['scripts', 'scripts-minify']);
gulp.watch([
'app/partials/**.pug',
'app/index.pug'], ['views-compile']);
gulp.watch([
'app/style/**.style'], ['stylus']);
})
gulp.task('stylus', function(){
return gulp.src([
'app/style/**.style'
])
.pipe(stylus({
compress:true
}))
.pipe(gulp.dest('app/views/css/'))
})
gulp.task('views-compile', function(){
return gulp.src([
'app/partials/**.pug',
'app/index.pug'
])
.pipe(pug.compile())
.pipe(gulp.dest('app/views'))
})
gulp.task('scripts', function(){
return gulp.src([
'app/app.js',
'app/routes/routes.js',
'app/controllers/**.js',
'app/directives/**.js',
'app/services/**.js',
'app/libs/**.js']
)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('app/scripts/'))
})
gulp.task('scripts-minify', function(){
return gulp.src([
'app/scripts/scripts.js']
)
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest('app/scripts/'))
});
Tasks.json
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "default",
"isBuildCommand": true,
"showOutput": "always",
"isWatching": true
}
]
}

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

Browsersync serve local files instead of remote files

So I want to connect browsersync to a site I don't have any control over. Basically I want it to replace a css file on the live site with a css file on my computer (which gets compiled from a bunch of less files). When that local css file is changed then browsersync should inject the css like it normally would. I'm using browsersync with gulp since I also want to have other tasks run.
The code below will open gulpjs.com and correctly match main.css from gulpjs.com and attempt to serve something in it's place. But all I'm getting is a 404 for the main.min.css. It's looking for it here
http://localhost:3000/css/main.min.css
I zipped up the test project (node modules not included) you can download it here - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0
Here's what I have so far...
Project Structure
css/ main.min.css (compiled from app.less)
less/ app.less
gulpfile.js
package.json
package.json
{
"name": "browsersyncTest",
"devDependencies": {
"autoprefixer": "^6.7.0",
"browser-sync": "^2.18.6",
"cssnano": "^3.10.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",
"gulp-less": "^3.3.0",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11"
}
}
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var cleancss = require('gulp-clean-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
});
gulp.task('less', function () {
var plugins = [autoprefixer({browsers: ['last 2 versions', 'ie >= 10']})];
return gulp.src('less/app.less')
.pipe(less())
.pipe(rename('main.min.css'))
//.pipe(postcss(plugins))
//.pipe(cleancss())
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
});
gulp.task('watch', ['less'], function () {
browserSync.init({
proxy: "http://gulpjs.com/",
files: ['css/**'],
serveStatic: ['css'],
rewriteRules: [{
match: new RegExp('css/main.css'),
fn: function() {
return 'css/main.min.css';
}
}]
});
gulp.watch('less/**/*.less', ['less']);
});
Thanks a bunch!
Got it all figured out.
Here's the updated code.
browserSync.init({
proxy: "http://gulpjs.com/",
rewriteRules: [
{
match: new RegExp("css/main.css"),
fn: function() {
return "main.min.css"
}
}
],
files: "css/*.css",
serveStatic: ['./css']
});

stylus task compiles but not reload in chrome

Recently, there is something going wrong with my project and i don't know where am i wrong? so need a fresh look and a help.
The issue is that when i run gulp my stylus task compiles fine (I see changes in css) but it doesn't reload in chrome automatically. I have chrome extension (livepage) and all nesessary plugins were installed locally with npm.
I tested another one which is most same and that works fine.
here is my gulpfile :
var gulp = require('gulp'),
stylus = require('gulp-stylus'),
jade = require('gulp-jade'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch');
//- JADE
gulp.task('jade', function(){
return gulp.src('app/jade/*.jade')
.pipe(plumber())
.pipe(jade({pretty:true}))
.pipe(gulp.dest('build'))
});
//- CSS
gulp.task('css', function(){
return gulp.src('app/stylus/*.styl')
.pipe(plumber())
.pipe(stylus())
.pipe(gulp.dest('build/css'))
});
//- WATCH
gulp.task('watch', function(){
gulp.watch('app/stylus/*.styl', ['css']);
gulp.watch('app/jade/*.jade', ['jade']);
});
//- DEFAULT
gulp.task('default', ['jade', 'css', 'watch']);
json :
{
"name": "newone",
"version": "1.0.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jade": "^1.1.0",
"gulp-plumber": "^1.0.1",
"gulp-stylus": "^2.0.6",
"gulp-watch": "^4.3.5"
}
}
project tree
newone
| app
| jade
index.jade
| stylus
style.styl
| build
| css
style.css
index.html
so, any advice? thank you...
Just use Browser-Sync for live reloading, it's awesome!
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var stylus = require('gulp-stylus');
// Static Server + watching styl/html files
gulp.task('serve', ['stylus'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/stylus/*.styl", ['stylus']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('stylus', function() {
return gulp.src("app/stylus/*.styl")
.pipe(stylus())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Good luck!