I start it off with
gulp sync
and get
[17:14:23] Starting 'scripts'...
[17:14:23] Finished 'scripts' after 43 ms
[17:14:23] Starting 'sync'...
[17:14:23] Finished 'sync' after 20 ms
[BS] Access URLs:
--------------------------------------
Local: http://localhost:(my port)
External: http://(my internal IP address)
--------------------------------------
UI: http://localhost:(myport+n)
UI External: http://(my internal IP address)
--------------------------------------
[BS] Serving files from: public
The browser loads up the page.
I save a file and it works. Terminal output :
[17:17:22] Starting 'scripts'...
[17:17:22] Finished 'scripts' after 17 ms
[17:17:22] Starting 'scripts-watch'...
[BS] Reloading Browsers...
I save the file again (or save a different file)
[17:18:38] Starting 'scripts'...
[17:18:38] Finished 'scripts' after 8.99 ms
Note theres no Reloading Browsers message. The browser does not reload. Stopping gulp and manually reloading the page DOES reflect the change.
My gulpfle :
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var react = require('gulp-react');
var minifyCSS = require('gulp-minify-css');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src('dev/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(rename('styles.min.css'))
.pipe(gulp.dest('public/css'))
});
gulp.task('scripts', function() {
return gulp.src('dev/js/*.js')
.pipe(rename('scripts.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
gulp.task('build', function() {
return gulp.src('dev/components/**')
.pipe(concat('components.min.js'))
.pipe(react())
.pipe(uglify())
.pipe(gulp.dest('public/js'))
});
// Default Task
gulp.task('default', function() {
gulp.start('less');
gulp.start('scripts');
gulp.start('build');
});
gulp.task('scripts-watch', ['scripts'], browserSync.reload);
gulp.task('less-watch', ['less'], browserSync.reload);
gulp.task('build-watch', ['build'], browserSync.reload);
gulp.task('sync', ['scripts'], function() {
browserSync.init({
server: {
baseDir: "public",
index : "index.htm"
}
});
gulp.watch('dev/js/*.js', ['scripts-watch', browserSync.reload]);
gulp.watch('dev/less/*.less', ['less-watch', browserSync.reload]);
gulp.watch('dev/components/**', ['build-watch', browserSync.reload]);
});
Using chrome on ubuntu if that matters.
Related
I am building a website on gulp, this code snippet basically contains 3 tasks browser-sync jekyll-build stylus, browser-sync task depends upon jekyll-build.
browser-sync works fine but the stylus function in which I am returning a stream is giving a error which is not expected.
Below is my code snippet.
I am returning a stream here which is one of the solutions mentioned in the doc Async Completion but still I get the error.
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
stylus = require('gulp-stylus'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
jeet = require('jeet'),
rupture = require('rupture'),
koutoSwiss = require('kouto-swiss'),
prefixer = require('autoprefixer-stylus'),
imagemin = require('gulp-imagemin'),
cp = require('child_process');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
var jekyllCommand = (/^win/.test(process.platform)) ? 'jekyll.bat' : 'jekyll';
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn(jekyllCommand, ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
/**
* Stylus task
*/
gulp.task('stylus', function() {
return gulp.src('src/styl/main.styl').pipe(plumber())
.pipe(
stylus({
use: [koutoSwiss(), prefixer(), jeet(), rupture()],
compress: true,
})
)
.pipe(gulp.dest('_site/assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
ERROR SHOWN BELOW
[23:28:52] Using gulpfile ~/berserker1.github.io/gulpfile.js
[23:28:52] Starting 'default'...
[23:28:52] Starting 'browser-sync'...
[23:28:52] Starting 'jekyll-build'...
Configuration file: /home/aaryan/berserker1.github.io/_config.yml
Source: /home/aaryan/berserker1.github.io
Destination: /home/aaryan/berserker1.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.234 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[23:28:52] Finished 'jekyll-build' after 818 ms
[23:28:52] Finished 'browser-sync' after 819 ms
[23:28:52] Starting 'stylus'...
[23:28:53] The following tasks did not complete: default, stylus
[23:28:53] Did you forget to signal async completion?
There is an issue here (whether it is the same as the one in your question we'll see if it helps):
gulp.task('browser-sync', gulp.series('jekyll-build'), function() {
browserSync({
server: {
baseDir: '_site'
}
});
done();
});
I gulp v4 task takes only two arguments - the code above has three. This should be correct:
gulp.task('browser-sync', gulp.series('jekyll-build', function(done) {
browserSync({
server: {
baseDir: '_site'
}
});
done();
}));
Plus, I added the done parameter in the first line. See if this helps.
$ gulp build
[02:36:37] Using gulpfile C:\xampp\htdocs\melodic\gulpfile.js
[02:36:37] Starting 'build'...
[02:36:37] Starting 'clean:dist'...
[02:36:37] Finished 'clean:dist' after 4.63 ms
[02:36:37] Starting 'sass'...
[02:36:37] Starting 'useref'...
[02:36:37] Starting 'img'...
[02:36:37] Starting 'cleancss'...
[02:36:37] Finished 'cleancss' after 37 ms
C:\xampp\htdocs\melodic\node_modules\gulp-useref\node_modules\vinyl-
fs\lib\src\index.js:20
throw new Error('Invalid glob argument: ' + glob);
^
Error: Invalid glob argument:
at Object.src (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\vinyl-fs\lib\src\index.js:20:11)
at DestroyableTransform.addAssetsToStream
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:62:15)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:124:31
at Array.forEach (native)
at DestroyableTransform.processAssets
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:115:11)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:178:31
at Stream.<anonymous> (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\event-stream\index.js:318:20)
at _end (C:\xampp\htdocs\melodic\node_modules\through\index.js:65:9)
at Stream.stream.end
(C:\xampp\htdocs\melodic\node_modules\through\index.js:74:5)
at DestroyableTransform.onend
(C:\xampp\htdocs\melodic\node_modules\through2\node_modules\readable-
stream\lib\_stream_readable.js:577:10)
I have tried to remove the running tasks one by one but to no avail. What throws me off also is the fact that it seems to run through all the tasks and even finishing them and then crashing as the last task is finished. Thanks in advance.
EDIT: Here is my gulpfile as I forgot to include it.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
//Requires browser synch
var browserSync = require('browser-sync').create();
//Requires userref
var useref = require('gulp-useref');
//Requires uglify
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
//Requires cssnano
var cssnano = require('gulp-cssnano');
//Requires imagemin
var imagemin = require('gulp-imagemin');
//Requires cache
var cache = require('gulp-cache');
//Requires del
var del = require('del');
//Requires run-sequence
var runSequence = require('run-sequence');
//requires postcss
var postcss = require('gulp-postcss');
//ACTIVE COMMANDS
/*Run 'gulp browserSync' in commandline.
This task automatically reloads the broswer upon each save of document*/
gulp.task('browserSync', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./app"
},
})
});
/*Run 'gulp sass' in command line.
THIS TASK GETS ALL SCSS IMPORTED INTO THE app.scss FILE AND CONVERTS IT INTO app.css.
THIS TASK IS A ONE TIME CONVERSTION*/
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
/*Run 'gulp watch' in command line.
THIS TASK GETS ALL SCSS AND OTHER FILE TYPES AND CONVERTS THEM ACITVELY.
THIS TASK IS ONGOING*/
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
//PRODUCTION/FINAL COMMANDS
/*Run 'gulp useref' in command line.
THIS TASK GETS ALL CSS AND OTHER FILE TYPES AND JOINS DIFFERENT FILES AND MINIMIZES THEM IN THE DIST FOLDER.
*/
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('cleancss', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
/*Run 'gulp img' in command line.
MINIMIZSES PHOTOS TO THE DIST FOLDER*/
gulp.task('img', function(){
return gulp.src('app/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin({
// Setting interlaced to true
interlaced: true
}))
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/img'))
});
/*Run 'gulp fonts' in command line.
CLEANS THE DIST DIRECTORY FOR UNUSED FILES*/
gulp.task('clean:dist', function() {
return del.sync('dist');
});
/*Run 'gulp fonts' in command line.
CLEANS THE IMAGE CACHE CREATED EARLIER*/
gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'img', 'cleancss'],
callback
)
});
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
});
EDIT: Included my gulpfile for further details.
I am trying to create a basic gulp build process template that starts with an app folder containing html, sass, javascript, and image files and builds those files into a public folder. I am using gulp to watch the app folder for changes and then automatically refreshing the build process to the public folder.
I using browser-sync to serve the public folder and watch for changes but it doesn't seem to automatically reload when a change to the public folder is made. If I manually refresh the browser the changes are reflected.
Thanks for the help, see below for my gulp file:
//BASIC GULP FILE SETUP
//-------------------------------------------------------------
//Include Gulp
var gulp = require('gulp');
//General Plugins
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var del = require('del');
var watch = require('gulp-watch');
var runSequence = require('run-sequence');
//CSS Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
//JS Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//HTML Plugins
var minifyHTML = require('gulp-minify-html');
//IMG Plugins
//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------
//Clean Public Folder
gulp.task('clean', function() {
del(['public/**/*']);
});
//CSS Tasks
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(gulp.dest('public/css'));
});
//HTML Tasks
gulp.task('html', function () {
return gulp.src(['./app/**/*.html'], {
base: 'app'
})
.pipe(minifyHTML())
.pipe(gulp.dest('public'))
;
});
//Image Tasks
gulp.task('image', function () {
return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
.pipe(gulp.dest('public/images'));
});
//JS Tasks
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch files for changes
gulp.task('watch', function() {
// Watch HTML files
gulp.watch('./app/*.html', ['html'], browserSync.reload);
// Watch Sass files
gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
// Watch JS files
gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
// Watch image files
gulp.watch('./app/img/*', ['image'], browserSync.reload);
});
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
gulp.task('defualt');
gulp.task('build', [], function(callback) {
runSequence('clean',
'sass',
'html',
'js',
'image');
});
I did a little more poking around the forums and the browser-sync documentation. In my serve task I needed to add a watch function to the Public directory that would manually call the reload every time a change was detected. So my 'browser-sync' task, now renamed 'serve', needs to look like this:
//Browser Sync Server
gulp.task('serve', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
gulp.watch("./public/**/*").on("change", browserSync.reload);
});
I am sure there is a way to do this with browser-sync's streams as well, but this manual reload method found in the docs has done the trick.
Try passing in a files object in the init function so it knows what to look for. No need for a different watch task, Browsersync does all that for you.
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
},
files: [
'**/*.css',
'**/*.js',
'**/*.html'
// etc...
]
});
});
I'm using Gulp + BrowserSync and I'm trying to reload my development website when changes are made to my HTML files, but I can't seem to get it working.
I'm getting no errors in the command line, my page seems to reload but the changes I've made don't appear in the browser, unless I quit the gulp task and run it again.
This is my current setup:
var gulp = require('gulp');
var browserify = require('browserify');
var swig = require('gulp-swig');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('serve', function () {
browserSync({
server: {
baseDir: './Build'
}
});
});
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig())
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}))
});
// Default task
gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
gulp.watch('./src/*.html', ['templates']);
gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
gulp.watch('./src/js/*.js', ['js']);
});
Any help with this is appreciated. Thanks in advance!
The problem in this setup seems to be swig. When you check the files in ./Build, they haven't changed, so the browser is loading the files correctly. But swig does not get the changes. Disabling swig's caching feature should resolve this:
gulp.task('templates', function() {
return gulp.src('./src/*.html')
.pipe(swig({
defaults: { cache: false }
}))
.pipe(gulp.dest('./Build'))
.pipe(reload({stream: true}));
});
I've tried several different things in my gulpfile.js to get HTML automatic reloading to work with BrowserSync (not LiveReload) in Gulp, but none have worked. I thought this last try would do the trick but it isn't working, either. What am I missing?
Here's my entire gulpfile.js:
// -------------------------------------------------------------------------
// GET THINGS SET UP
// -------------------------------------------------------------------------
// Include Gulp
var gulp = require('gulp');
// CSS plugins
var sass = require('gulp-sass');
var combineMediaQueries = require('gulp-combine-media-queries');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
// JS plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
// Image plugins
var imagemin = require('gulp-imagemin');
var svgmin = require('gulp-svgmin');
// General plugins
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var notify = require('gulp-notify');
// -------------------------------------------------------------------------
// TASKS
// -------------------------------------------------------------------------
// CSS tasks
gulp.task('css', function() {
return gulp.src('src/scss/**/*')
// Compile Sass
.pipe(sass({ style: 'compressed', noCache: true }))
// Combine media queries
.pipe(combineMediaQueries())
// parse CSS and add vendor-prefixed CSS properties
.pipe(autoprefixer())
// Minify CSS
.pipe(cssmin())
// Where to store the finalized CSS
.pipe(gulp.dest('build/css'))
// Notify us that the task was completed
.pipe(notify({ message: 'CSS task complete' }));
});
// JS tasks
gulp.task('js', function() {
return gulp.src('src/js/**/*')
// Concatenate all JS files into one
.pipe(concat('production.js'))
// Minify JS
.pipe(uglify())
// Where to store the finalized JS
.pipe(gulp.dest('build/js'))
// Notify us that the task was completed
.pipe(notify({ message: 'Javascript task complete' }));
});
// Image tasks
gulp.task('images', function() {
return gulp.src('src/images/raster/*')
// Minify the images
.pipe(imagemin())
// Where to store the finalized images
.pipe(gulp.dest('build/images'))
// Notify us that the task was completed
.pipe(notify({ message: 'Image task complete' }));
});
// SVG tasks
gulp.task('svgs', function() {
return gulp.src('src/images/vector/*')
// Minify the SVG's
.pipe(svgmin())
// Where to store the finalized SVG's
.pipe(gulp.dest('build/images'))
// Notify us that the task was completed
.pipe(notify({ message: 'SVG task complete' }));
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
// Watch HTML files
gulp.watch('build/*.html', reload);
// Watch Sass files
gulp.watch('src/scss/**/*', ['css']);
// Watch JS files
gulp.watch('src/js/**/*', ['js']);
// Watch image files
gulp.watch('src/images/raster/*', ['images']);
// Watch SVG files
gulp.watch('src/images/vector/*', ['svgs']);
});
gulp.task('browser-sync', function() {
browserSync.init(['build/css/*', 'build/js/*'], {
server: {
baseDir: "build"
}
});
});
// Default task
gulp.task('default', ['css', 'js', 'images', 'svgs', 'watch', 'browser-sync']);
I had the exact same problem.
The problem was that my jade (html) task did not finish before my browsersync task.
So I made the browsersync task wait for all tasks that had to finish first
Apparently thats why Browser-Sync was not aware of the file, this fixed it:
gulp.task('browsersync', ['jade', 'stylus', 'browserify'], function() {
browserSync.init(['./public/**/**.**'], {
port: 8080,
server: {
baseDir: "./public"
}
});
});
gulp.task('browser-sync', function() {
browserSync.init(['./build/css/**.*', './build/js/**.*'], {
server: {
baseDir: "./build"
}
});
});
These minor changes in the code above, should fix your problem...