UNKNOWN error thrown by gulp watch task - gulp

I'm facing a 'randomly' occurring fatal error whilst using a watch task for gulp.
General setup
I'm on Windows 10, in which I host a Debian VM using VMWare. I have a network mapping directly into the app folder on the web server. As IDE, I use Atom, where I have opened said folder. This way, I'm directly working on the web server so that my many code changes do not require a deploy step.
Error
My build task is driven by gulp. Let me first show the error I'm facing:
W:\jd5>gulp watch
[16:21:10] Using gulpfile W:\jd5\gulpfile.js
[16:21:10] Starting 'watch'...
[16:21:11] 'watch' errored after 1.35 s
[16:21:11] Error: watch W:\jd5\src\js\vendor\ UNKNOWN
at _errnoException (util.js:1022:11)
at FSWatcher.start (fs.js:1374:19)
at Object.fs.watch (fs.js:1400:11)
at Gaze._watchDir (W:\jd5\node_modules\gaze\lib\gaze.js:289:30)
at W:\jd5\node_modules\gaze\lib\gaze.js:358:10
at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
at W:\jd5\node_modules\gaze\lib\helper.js:61:11
at W:\jd5\node_modules\gaze\lib\gaze.js:420:5
at iterate (W:\jd5\node_modules\gaze\lib\helper.js:52:5)
at W:\jd5\node_modules\gaze\lib\helper.js:61:11
events.js:183
throw er; // Unhandled 'error' event
^
Regarding the randomness of this error: I often face it when starting watch, but sometimes not. It's at about 50% fail rate. Sometimes I can develop an entire day without it occurring. It's a frustrating error as it completely blocks my workflow, and it only mentions "UNKNOWN".
Gulp task
This is the gulp file I currently use:
/* load plugins */
var gulp = require('gulp');
// fast libsass-based SCSS parser
var sass = require('gulp-sass');
var del = require('del');
/* note that nano has a built-in auto prefixer, which we will use */
var nano = require('gulp-cssnano');
var gzip = require('gulp-gzip');
var minify = require('gulp-minify');
var babel = require("gulp-babel");
var sourcemaps = require('gulp-sourcemaps');
/* browser definition will be used by auto prefixer */
var myBrowsers = [
'last 2 versions',
'safari >= 8'
];
/* delete previously built files */
gulp.task('clean', function(cb) {
del(['public/css/*.css', 'public/js/**/*.js'], cb);
});
/* STYLES
================================================================================
*/
/* compile SCSS styles into CSS */
gulp.task('styles', function () {
return gulp.src('src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(nano({
autoprefixer: {
browsers: myBrowsers,
add: true
}
}))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/css'));
});
/* SCRIPTS
================================================================================
*/
gulp.task('scripts', function() {
gulp.start('scripts_global', 'scripts_vendor', 'scripts_modules')
.on('error', function(err) {
console.error('Error', err.message);
});
});
/* src/js/*.js > these are global scripts. minify, gzip and move to public/js/*.js */
gulp.task('scripts_global', function() {
return gulp.src('src/js/*.js')
.pipe(minify({
ext: {
min: '.min.js'
}
}))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/js/'));
});
/* src/js/vendor/*.js > vendor scripts should already be minimized, so gzip and move to public/js/vendor/*.js */
gulp.task('scripts_vendor', function() {
return gulp.src('src/js/vendor/*.js')
.pipe(gzip({
append: false
}))
.pipe(gulp.dest('public/js/vendor/'));
});
/* src/js/modules/*.js > module scripts should be transpiled to systemjs compatible modules, towards public/js/modules/*.js */
gulp.task("scripts_modules", function() {
return gulp.src("src/js/modules/*.js")
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write('.'))
.pipe(gzip({
append: false
}))
.pipe(gulp.dest("public/js/modules"));
});
/* default task: first clean, then run styles and scripts build tasks */
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts');
});
/* watch task to continuously build styles and scripts as they change in src dir */
gulp.task('watch', function() {
// watch .scss files
gulp.watch('src/scss/**/*.scss', ['styles']);
// watch .js files
gulp.watch('src/js/**/*.js', ['scripts']);
});
As the error itself provides no information on a possible cause, some speculations:
I consider it unlikely to be a permission problem on some file, because those would always fail, not just sometimes.
I am considering both Atom and this process touching files at the same time, but have no evidence for it, nor would I know how to prevent it. The process also sometimes fails with Atom not even open.
Note that running the individual tasks without watch (gulp styles, gulp scripts) works just fine, so the task themselves look OK, more likely I'm making a mistake in how they are linked up, but I don't know what it is.
I'm on Node v8.9.4. Here are the relevant parts of my package.json:
{
"name": "",
"version": "",
"description": "",
"author": "F",
"license": "",
"devDependencies": {
"babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-cssnano": "^2.1.3",
"gulp-gzip": "^1.4.0",
"gulp-minify": "0.0.15",
"gulp-sass": "^3.2.1",
"gulp-sourcemaps": "^2.6.0"
},
"dependencies": {
"del": "^2.2.2",
"eslint": "^4.19.1"
}
}

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

gulp & bourbon #include font-face issue - Custom fonts not importing?

I am using gulp for the first time I have everything working how I would like it but an stuck on one issue. I have a custom font family in a fonts folder something like "assets/fonts/font-family/...."
The issue I am having is that normally in a static project I would normally just use bourbon's :
#include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular", $file-formats: eot woff2 woff);
This would then allow me to use the family in a regular font-family declaration easy peasy.
However this does not work in my current gulp project. here is the gulpfile I currently have:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*.html'], ['jekyll-rebuild']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
I am severely confused as to what I need to do next to get custom assets working for the bourbon include. Maybe this is because I installed bourbon in a normal fashion and gulp isn't handling bourbon? Any direction or critiques are much appreciated.
What version of gulp-sass are you using?
I had the same error on version 0.7.3, but upgrading to the current (2.0.4) version fixed this problem.

Gulp keeps throwing errors and missing modules

Hi I am working with the web starter kit angular version and am having real issues compiling the code without errors. The main problematic task is the scripts one which keeps giving me random missing modules and uglify/parse problem.
events.js:85
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (C:\Users\Jensten\webkit\node_modules\gulp
-uglify\node_modules\uglify-js\lib\parse.js:196:18)
at js_error (C:\Users\Jensten\webkit\node_modules\gulp-uglify\no
de_modules\uglify-js\lib\parse.js:204:11)
at croak (C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_
modules\uglify-js\lib\parse.js:679:41)
at token_error (C:\Users\Jensten\webkit\node_modules\gulp-uglify
\node_modules\uglify-js\lib\parse.js:683:9)
at expect_token (C:\Users\Jensten\webkit\node_modules\gulp-uglif
y\node_modules\uglify-js\lib\parse.js:696:9)
at expect (C:\Users\Jensten\webkit\node_modules\gulp-uglify\node
_modules\uglify-js\lib\parse.js:699:36)
at expr_list (C:\Users\Jensten\webkit\node_modules\gulp-uglify\n
ode_modules\uglify-js\lib\parse.js:1202:44)
at C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_modules
\uglify-js\lib\parse.js:1217:23
at C:\Users\Jensten\webkit\node_modules\gulp-uglify\node_modules
\uglify-js\lib\parse.js:722:24
at expr_atom (C:\Users\Jensten\webkit\node_modules\gulp-uglify\n
ode_modules\uglify-js\lib\parse.js:1180:35)
C:\Users\Jensten\webkit\>gulp html
[16:47:01] Using gulpfile ~\pokerstars-webkit\gulpfile.js
[16:47:01] Starting 'html'...
[16:47:02] 'html' errored after 1.54 s
[16:47:02] TypeError: undefined is not a function
at Gulp.<anonymous> (C:\Users\Jensten\webkit\gulpfile.js:130:18)
at module.exports (C:\Users\Jensten\webkit\node_modules\gulp\nod
e_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\Jensten\webkit\node_modu
les\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\Jensten\webkit\node_modu
les\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\Jensten\webkit\node_modules
\gulp\node_modules\orchestrator\index.js:134:8)
at c:\Users\Coutolil\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:2
0
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
My gulp.js file contains the following:
/**
*
* Web Starter Kit
* Copyright 2014 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License
*
*/
'use strict';
// Include Gulp & Tools We'll Use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var pagespeed = require('psi');
var reload = browserSync.reload;
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.0',
'bb >= 10'
];
// Lint JavaScript
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(reload({stream: true, once: true}))
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
});
// Optimize Images
gulp.task('images', function() {
return gulp.src('app/assets/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/assets/images'))
.pipe($.size({title: 'images'}));
});
// Copy All Files At The Root Level (app)
gulp.task('copy', function() {
return gulp.src(['app/*', '!app/*.html', '!app/scss', '!app/scripts'], {dot: true})
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'copy'}));
});
// Copy Web Fonts To Dist
gulp.task('fonts', function() {
return gulp.src(['app/assets/fonts/**'])
.pipe(gulp.dest('dist/assets/fonts'))
.pipe($.size({title: 'fonts'}));
});
// Automatically Prefix CSS
gulp.task('styles:css', function() {
return gulp.src('app/styles/css/**/*.css')
.pipe($.changed('app/styles'))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('app/styles'))
.pipe($.size({title: 'styles:css'}));
});
// Compile Sass For Style Guide Components (app/styles/components)
gulp.task('styles:scss', function() {
var path = require('path');
return gulp.src('app/scss/app.scss')
.pipe($.sass({
style: 'expanded',
precision: 10,
loadPath: ['app/scss']
}))
.on('error', console.error.bind(console))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('app/assets/styles'))
.pipe(reload({stream:true}))
.pipe($.size({title: 'styles:scss'}));
});
//Watch sass
//---end Watch sass
// Output Final CSS Styles
gulp.task('styles', ['styles:scss', 'styles:css']);
// Scan Your HTML For Assets & Optimize Them
gulp.task('html', function() {
return gulp.src('app/**/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
// Remove Any Unused CSS
// commented for now as it doesn't work well with angular (ng-class for example)
/*.pipe($.if('*.css', $.uncss({
html: [
'app/index.html'
],
// CSS Selectors for UnCSS to ignore
ignore: [
'.navdrawer-container.open',
/.app-bar.open/
]
})))*/
// Concatenate And Minify Styles
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('components/components.css', 'components/main.min.css'))
// Minify Any HTML
.pipe($.if('*.html', $.minifyHtml({empty: true})))
// Output Files
.pipe(gulp.dest('dist'))
.pipe($.size({title: 'html'}));
});
gulp.task('scripts', function() {
return gulp.src('app/scripts/**/*.js')
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
.pipe($.sourcemaps.init())
.pipe($.concat('app.js'))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('app/assets/scripts'));
});
gulp.task('vendor', function() {
var mainBowerFiles = require('main-bower-files');
return gulp.src(mainBowerFiles(/* options */))
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
.pipe($.sourcemaps.init())
.pipe($.concat('vendor.js'))
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest('app/assets/scripts'));
})
// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
// Watch Files For Changes & Reload
gulp.task('serve', function() {
browserSync({
open: false,
notify: true,
server: {
baseDir: ['.tmp', 'app']
}
});
gulp.watch(['app/**/*.html'], reload);
gulp.watch(['app/scss/**/*.scss'], ['styles:scss']);
// gulp.watch(['{.tmp,app}/assets/styles/**/*.css'], ['styles:css']);
gulp.watch(['app/scripts/**/*.js'], [/*'jshint',*/ 'scripts', reload]);
gulp.watch(['app/assets/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function() {
browserSync({
open: false,
notify: true,
server: {
baseDir: 'dist'
}
});
});
// Build Production Files, the Default Task
gulp.task('default', ['clean'], function(cb) {
runSequence('styles', 'vendor', 'scripts', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);
});
// Run PageSpeed Insights
// Update `url` below to the public URL for your site
gulp.task('pagespeed', pagespeed.bind(null, {
// By default, we use the PageSpeed Insights
// free (no API key) tier. You can use a Google
// Developer API key if you have one. See
// http://goo.gl/RkN0vE for info key: 'YOUR_API_KEY'
url: 'https://example.com',
strategy: 'mobile'
}));
// Load custom tasks from the `tasks` directory
try {
require('require-dir')('tasks');
} catch(err) {
}
I am happy to use a different file, all I want is to make sure that: Angular, SASS, compression, and file output to the assets directory are working. I am currently able to run the project but the default task obviously does not run on gulp serve, hence why I was unable to see any errors before.
Could anyone point me in the right direction?
I had the same problem just now,then i realized that I haven't added the relative Plug-in to gulp. After I add it,then it's solved!
maybe this is the solution.
Place your devDependencies at correct place in package.json file as shown below
{
"name": "my-project",
"private": true,
"devDependencies": {
//dependencies are place here
},
"engines": {
"node": ">=0.10.0"
}
}