I just recently made a gulfile.js by helping google, but I face a problem which says
The following tasks did not complete: default, serve, sass
Did you forget to signal async completion?
Here is my gulpfile.js:
var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
// Compile sass into CSS & auto-inject into browsers
gulp.task("sass", function () {
return gulp
.src("ruby/assets/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("ruby/assets/css"))
.pipe(browserSync.stream());
});
// Static Server + watching scss/html files
gulp.task(
"serve",
gulp.series("sass", function () {
browserSync.init({
server: "./ruby/",
});
gulp.watch("ruby/assets/scss/*.scss", gulp.series("sass"));
gulp.watch("ruby/*.html").on("change", browserSync.reload);
})
);
gulp.task("default", gulp.series("serve"));
Here is my boilerplate:
I have no idea what the error is.
Related
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 pug = require('gulp-pug');
var jekyll = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
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 , gulp.task('build'), {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', gulp.task('jekyll-build'), function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', gulp.series('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('raw-assets/sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
. pipe(gulp.dest('assets/css'))
});
/**
* Compile files from _pugfiles into _includes (for live injecting) and site
(for future jekyll builds)
*/
gulp.task('pug', function buildHTML() {
return gulp.src('_pugfiles/*.pug')
.pipe(pug({
// Your options in here.
pretty: true
}))
.pipe(gulp.dest('_includes'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files/pug files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', gulp.task('sass'));
gulp.watch(['*.html', '_layouts/*.html', '_includes/*'], gulp.task('jekyll-rebuild'));
gulp.watch(['_pugfiles/*.pug'], gulp.task('pug'));
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', gulp.series('browser-sync', 'watch'));
I changed the
gulp.task('', [])
to
gulp.task('', gulp.series())
But it still gives an error of sass undefined.
I upgraded my gulp to the latest gulp and the gulpfile is not working anymore. I want to be able to run the gulp command and run everything the way it was before gulp 4. Any ways to fix this aside from reverting to the old version of gulp.
Move your 'sass' task before the 'browser-sync' task where it is first called.
I can't find the reference right now but I think when you use the gulp.task registration syntax (instead of functions as is actually recommended in gulp4 now) that you cannot refer to a task that is registered later in the file.
Also you have some other errors in your code. This line (and others like it):
gulp.task('browser-sync', gulp.series('sass', 'jekyll-build'), function() {
should be:
gulp.task('browser-sync', gulp.series('sass', 'jekyll-build', function() {
And:
gulp.task('jekyll-rebuild', gulp.task('jekyll-build'), function () {
browserSync.reload();
});
should be:
gulp.task('jekyll-rebuild', gulp.series('jekyll-build', function () {
browserSync.reload();
}));
Here is a very good migrating to gulp4 article.
When I use webpack in nodejs, it can catch every compile error, the watching callback will be called every build end.
const webpack = require("webpack");
const compiler = webpack({
// Configuration Object
});
const watching = compiler.watch({
/* watchOptions */
}, (err, stats) => {
// Print watch/build result here...
console.log(stats);
});
But when I use webpack-dev-server, the listen callback only called once when the server started, its there any way to catch every compile error when use webpack-dev-server in nodejs?
const compiler = Webpack(webpackConfig);
const server = new WebpackDevServer(compiler, {
stats: {
colors: true
}
});
server.listen(8080, '127.0.0.1', () => {
// only called once
console.log('bla');
});
finally solved this problem with plugin
compiler.plugin('done',callback)
this callback will be called every build done.
I'm using browser-sync in gulp task for example :
gulp.task('gulp-task',function(){
browserSync.init({
server:{
baseDir: 'app'
}
})
//rest of task
});
I use this gulp task in gulp watch for( for example ) app/**/*.html like :
gulp.task('watch',function(){
gulp.watch('app/**/*.html', ['gulp-task']);
});
for first time change in html files everything is ok but for next changes i get error:
TypeError: args.cbn is not a function ...
guys said to install latest version for browser-sync with command below :
npm install browser-sync#latest --save-dev
and it doesn't helped.
I'm getting the same error. what's wrong?
I also ran into this issue and solved it by removing the brackets from the callback in the watch task.
Try changing your watch task to:
gulp.task('watch',function(){
gulp.watch(['app/**/*.html'], 'gulp-task');
});
Or better yet, try using the reload method with something like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var jshint = require('gulp-jshint');
var watch = require('gulp-watch');
var reload = browserSync.reload;
gulp.task('default', ['jshint', 'serve', 'watch']);
gulp.task('jshint', function() {
return gulp.src('src/app/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
// Static server
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: "./src"
}
});
});
gulp.task('watch', function() {
gulp.watch(['src/**/*.html', 'src/app/**/*.js'], reload);
});
After reading the document of browser-sync,I noticed that the method .init( config, cb ) has two parameters.So,change your code to this:
gulp.task('gulp-task',function(){
browserSync.init({
server:{
baseDir: 'app'
}
})
//rest of task
},function(){
// something you want to do
});
While defining the 'watch' we need to declare what all tasks need to be run before watch, this will sort the problem out.
Extra parameter with pre-planned tasks needs to be added in the watch task list of parameters.
gulp.task('watch', ['browserSync', 'sass'], function(){...})
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('hello', function() {
console.log('Hello Gulp-Shash');
});
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', ['browserSync', 'sass'], function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
})
I have project and I use protractor test. But I would like use debugging but I don't know how to create config for him.
It is my protractor.conf.js
'use strict';
var paths = require('./.yo-rc.json')['generator-gulp-angular'].props.paths;
exports.config = {
capabilities: {
'browserName': 'chrome'
},
specs: [paths.e2e + '/**/*.js'],
mochaOpts: {
timeout: 5000
},
framework: 'mocha'
};
And e2e-tests.js gulp file:
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
module.exports = function(options) {
gulp.task('webdriver-update', $.protractor.webdriver_update);
gulp.task('webdriver-standalone', $.protractor.webdriver_standalone);
function runProtractor (done) {
gulp.src(options.e2e + '/**/**.js')
.pipe($.protractor.protractor({
configFile: 'protractor.conf.js'
}))
.on('error', function (err) {
// Make sure failed tests cause gulp to exit non-zero
throw err;
})
.on('end', function () {
// Close browser sync server
browserSync.exit();
done();
});
}
gulp.task('protractor', ['protractor:src']);
gulp.task('protractor:src', ['serve:e2e', 'webdriver-update'], runProtractor);
gulp.task('protractor:dist', ['serve:e2e-dist', 'webdriver-update'], runProtractor);
};
Help me please fix this issue because write code without quick watch and other good components not very well.
I've been trying out (or trying to get working) a jekyll style guide from: https://github.com/davidhund/jekyll-styleguide#user-content-requirements
My gulpfile is:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
// Handy file paths
paths = {
scss: "./static/scss/",
css: "./static/css/",
img: "./static/img/",
js: "./static/js/"
}
// SASS
gulp.task('sass', function() {
// Be specific in what file to process
return gulp.src(paths.scss+'app.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.css))
// .pipe(gulp.dest('./_site/static/css/'))
// .pipe(notify({ message: 'Styles task complete' }));
});
// COPY CSS
gulp.task('copycss', function() {
return gulp.src(paths.css+'app.min.css')
.pipe(gulp.dest('./_site/static/css/'))
// .pipe(notify({ message: 'Copied Minified CSS to _site/static/css' }));
});
// JEKYLL
// Start a `jekyll build` task
// From: http://stackoverflow.com/questions/21293999/use-jekyll-with-gulp
gulp.task('jekyll-build', function() {
require('child_process').spawn('jekyll', ['build', '--config=_config.dev.yml'], {stdio: 'inherit'});
});
// Start a `jekyll build --watch` task
gulp.task('jekyll-watch', function() {
require('child_process').spawn('jekyll', ['build', '--watch', '--config=_config.dev.yml'], {stdio: 'inherit'});
});
// BROWSER-SYNC
gulp.task('browser-sync', function() {
// reload when Jekyll-generated files change
browserSync.init(['./_site/static/**/*.css', './_site/**/*.html'], {
server: {
baseDir: './_site/'
}
});
});
// WATCH
gulp.task('watch', function() {
// TEST: [Only] Run `jekyll build` when I update (the version in) settings.yml
// gulp.watch('./_config.yml', ['jekyll']);
// Run Sass when I update SCSS files
gulp.watch(paths.scss+'**/*.scss', ['sass', 'copycss']);
// gulp.watch(paths.js+'**/*.js', ['scripts']);
// gulp.watch(paths.img+'**/*', ['images']);
});
// DEFAULT task
gulp.task('default', ['jekyll-watch', 'watch','browser-sync']);
Whenever I run gulp I just get:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:998:11)
at Process.ChildProcess._handle.onexit (child_process.js:789:34)
The problem you are facing is that you are not handling error, so, when gulp finds an error, it throw it, but "nobody" is taking care of it, which causes gulp to break.
In order to keep executing gulp, you have to define your error handlers and do whatever you want to do with error, typically, print on the cli what is going on.
You also need to identify which part of your code is "throwing" the error, in your case, its caused by the "watchers": a watcher listen for additional events or to add files to the watch. So, a watcher is throwing the error.
You have to catch it !
Add an on handler event after the execution of plugins, and pass this error to a function that will pint it (or something else), but will not break "the watch" (John Snow will be proud) and allows you to identify the error, fix it, at keep watching without restarting gulp manually.
PS: Don't forgot to define "the catcher function" !
Your code could be something like this:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var clean = require('gulp-clean');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
// Handy file paths
paths = {
scss: "./static/scss/",
css: "./static/css/",
img: "./static/img/",
js: "./static/js/"
}
// SASS
gulp.task('sass', function() {
// Be specific in what file to process
return gulp.src(paths.scss+'app.scss')
.pipe(sass({ style: 'expanded' })).on('error', errorHandler)
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.css))
// .pipe(gulp.dest('./_site/static/css/'))
// .pipe(notify({ message: 'Styles task complete' }));
});
// COPY CSS
gulp.task('copycss', function() {
return gulp.src(paths.css+'app.min.css')
.pipe(gulp.dest('./_site/static/css/'))
// .pipe(notify({ message: 'Copied Minified CSS to _site/static/css' }));
});
// JEKYLL
// Start a `jekyll build` task
// From: http://stackoverflow.com/questions/21293999/use-jekyll-with-gulp
gulp.task('jekyll-build', function() {
require('child_process').spawn('jekyll', ['build', '--config=_config.dev.yml'], {stdio: 'inherit'});
});
// Start a `jekyll build --watch` task
gulp.task('jekyll-watch', function() {
require('child_process').spawn('jekyll', ['build', '--watch', '--config=_config.dev.yml'], {stdio: 'inherit'});
});
// BROWSER-SYNC
gulp.task('browser-sync', function() {
// reload when Jekyll-generated files change
browserSync.init(['./_site/static/**/*.css', './_site/**/*.html'], {
server: {
baseDir: './_site/'
}
});
});
// WATCH
gulp.task('watch', function() {
// TEST: [Only] Run `jekyll build` when I update (the version in) settings.yml
// gulp.watch('./_config.yml', ['jekyll']);
// Run Sass when I update SCSS files
gulp.watch(paths.scss+'**/*.scss', ['sass', 'copycss']);
// gulp.watch(paths.js+'**/*.js', ['scripts']);
// gulp.watch(paths.img+'**/*', ['images']);
});
// DEFAULT task
gulp.task('default', ['jekyll-watch', 'watch','browser-sync']);
// Handle the error
function errorHandler (error) {
console.log(error.toString());
this.emit('end');
}
Note the error handler definition at the end and the addition of .on('error', errorHandler) on your sass task.