I am setting up my gulp.js file and everything is working fine except for gulp.watch. When I run "gulp" in the terminal, gulp runs through each task but doesn't watch for changes. Is there something I should change?
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return gulp.src('src/css/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('build/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('build/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('build/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('build/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('build/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Default task
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['build/**']).on('change', livereload.changed);
});
Yes, because the watch task was not called.
Add the watch to your default task
// Default task
gulp.task('default', ['watch'], function() {
gulp.start('styles', 'scripts', 'images');
});
Related
I had a simple javascript webpage and used gulp 3. Now (as I understand) node 10 crashes with gulp 3 so that ive upgraded to gulp 4. I have a very limited knowledge about gulp and read tutorials now on how to upgrade and I am still getting error: Task function must be specified.
Any help would be great. thanks!!
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
When converting to gulp 4, all Task arrays:
gulp.task('minify-css', ['sass'], function (done) {
should be using series:
gulp.task('minify-css', gulp.series('sass', function (done) {
final file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var cache = require('gulp-cache');
var imagemin = require('gulp-imagemin');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function (done) {
gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Minify compiled CSS
gulp.task('minify-css', gulp.series('sass', function (done) {
gulp.src('app/css/styles.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
done()
}));
// Minify custom JS
gulp.task('minify-js', function (done) {
gulp.src('app/js/index.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
done()
});
// Copy vendor files from /node_modules into /vendor
gulp.task('copy', function (done) {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery-easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
/*gulp.src(['node_modules/waypoints/lib/jquery.waypoints.js'])
.pipe(gulp.dest('vendor/waypoint'))*/
gulp.src(['node_modules/animate.css/animate.css'])
.pipe(gulp.dest('vendor/animate'))
/* gulp.src(['node_modules/scrollreveal/dist/scrollreveal.js'])
.pipe(gulp.dest('vendor/scrollreveal'))*/
done()
})
// Optimizing Images
gulp.task('images', function(done) {
gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true,
})))
.pipe(gulp.dest('dist/images'));
done()
});
// Default task
/*gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);*/
gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'copy'));
// Configure the browserSync task
gulp.task('browserSync', function (done) {
browserSync.init({
server: {
baseDir: ''
},
port: process.env.PORT || 8080
});
done()
})
// Dev task with browserSync
//old:
/*
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js', 'images'], function () {
gulp.watch('scss/!*.scss', ['sass']);
gulp.watch('css/!*.css', ['minify-css']);
gulp.watch('js/!*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**!/!*.js', browserSync.reload);
});*/
//new
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss')
.on('change', function(path, stats) {
console.log('File ' + path + ' was changed');
}).on('unlink', function(path) {
console.log('File ' + path + ' was removed');
});
});
watch task:
gulp.task('watch', function (done) {
gulp.watch('scss/*.scss', gulp.series('sass'));
gulp.watch('css/!*.css', gulp.series('minify-css'));
gulp.watch('js/!*.js', gulp.series('minify-js'));
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/!**/!*.js', browserSync.reload);
return
});
I tried using function instead gulp.task() and it worked for me. I found this solution in a youtube video
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./app/scss/**/*.scss')
// 2. pass that file through sass compiler
.pipe(sass().on('error', sass.logError))
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./app/css'))
// 4. stream changes to all browser
.pipe(browserSync.stream());
}
function watch() {
gulp.watch('./app/scss/**/*.scss', style);
gulp.watch('./app/**/*.html').on('change', browserSync.reload);
gulp.watch('./app/js/**/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
for some reason gulp not creating source maps file for concated and uglified js.
I tried different options and setups but with no luck.
I was working at one moment but than it stop working. Not sure why.
Here is the gulp task:
'use strict';
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
clean = require('gulp-clean'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
runSequence = require('run-sequence'),
concat = require('gulp-concat'),
uglify = require('gulp-uglifyjs');
// Configure sass
gulp.task('sass', () => {
return gulp.src('sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(sourcemaps.write('sourceMap'))
.pipe(gulp.dest('web/css'))
});
// Configure autoprefixer
gulp.task('autoprefixer', () => {
gulp.src(['web/css/**/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('web/css/'))
});
// Configure clean task
gulp.task('clean:css', () => {
gulp.src('web/css/*.css')
.pipe(clean())
});
// Configure css min
var cssMinifyLocation = ['web/css/*.css', '!web/css/*.min.css'];
gulp.task('css:min', () => {
return gulp.src(cssMinifyLocation)
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename(
{suffix: '.min'}
))
.pipe(gulp.dest('web/css'))
});
// Configure jsconcat and jsmin
gulp.task('compilejs', function()
{
gulp.src(
[
'web/js/twigjs/**/*.js'
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/js'));
});
// Configure watch
gulp.task('watch', () => {
gulp.watch('sass/**/*.scss', () => { runSequence('clean:css', 'sass',
'autoprefixer', ['css:min']) });
gulp.watch('web/js/twigjs/**/*.js', () => {runSequence('compilejs')});
});
// Run build task
gulp.task('build', (callback) => {
runSequence('clean:css', 'sass', 'autoprefixer',
['css:min'], callback);
});
Please advise, and provide feedback.
Or if you have suggestion what to do in some different way.
Try this code:
gulp.task('compilejs', function()
{
gulp.src(
[
'web/js/twigjs/**/*.js'
])
.pipe(sourcemaps.init())
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('web/js'));
});
I'm trying to give Gulp a try for the first time and can't figure out why is taking so long in loading packages and running tasks, about 48 seconds every time. Not sure how many packages are the average, but I think I need all of them. I've been trying to improve the performance by following some examples but I'm stuck in the same place.
I'd really appreciate any piece of advice!
This is my gulpfile.js:
var gulp = require('gulp'),
runSequence = require('run-sequence'),
templateCache = require('gulp-angular-templatecache'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename")
browserify = require('browserify'),
concat = require('gulp-concat'),
addStream = require('add-stream'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
ngAnnotate = require('gulp-ng-annotate'),
uglify = require('gulp-uglify'),
jshint = require('gulp-jshint'),
htmlmin = require('gulp-html-minifier'),
del = require('del');
function templates() {
return gulp.src('./app/views/**/*.html')
.pipe(templateCache({
module: 'portfolio'
}));
}
gulp.task('clean:dist', function() {
return del.sync('dist/assets/');
});
gulp.task('jshint', function() {
return gulp.src('./app/js/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
});
gulp.task('browserify', function() {
return browserify('./app/app.js')
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(ngAnnotate())
.pipe(addStream.obj(templates()))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/js/'))
});
gulp.task('sass', function() {
return gulp.src('./app/css/main.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist/assets/css'))
});
gulp.task('images', function() {
return gulp.src('./app/img/**/*.{png,jpg,gif,svg}')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/assets/img'))
});
gulp.task('copyfonts', function() {
gulp.src('./app/css/fonts/**/*.*')
.pipe(gulp.dest('./dist/assets/fonts'));
});
gulp.task('copy-index-html', function() {
gulp.src('./app/index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist'));
});
gulp.task('serve', function() {
browserSync({
server: {
baseDir: './dist'
}
});
gulp.watch('app/js/**/*.js', ['browserify', reload]);
gulp.watch('app/css/**/*.scss', ['sass', reload]);
gulp.watch('app/views/**/*.html', [reload]);
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', function(callback) {
runSequence('clean:dist', 'jshint', ['browserify', 'sass', 'images','copy-index-html','copyfonts'], 'serve', callback);
});
Gulp performance (image link)
Still getting familiar with Gulp, piping, etc. I have my Gulp.js file all set up but cannot figure out how to get the Jekyll html task to fire AFTER the _site folder has been compiled.
THE gulp file is below:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
minifyHTML = require('gulp-minify-html'),
cp = require('child_process');
//Source variables
var sassSources = ['components/sass/application.scss'];
var jsSources = ['components/js/*.js'];
var htmlSources = ['_site/**/*.html'];
gulp.task('styles', function() {
return gulp.src(sassSources)
.pipe(plumber())
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp.task('html', function() {
var opts = {comments:false, spare:false, quotes: false, empty: false};
gulp.src(htmlSources)
.pipe(minifyHTML(opts))
.pipe(gulp.dest('_site/'))
.pipe(notify({ message: 'HTML minification complete' }));
});
gulp.task('scripts', function() {
return gulp.src(jsSources)
//.pipe(jshint('.jshintrc'))
//.pipe(jshint.reporter('default'))
.pipe(concat('application.js'))
.pipe(gulp.dest('js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('js'))
.pipe(gulp.dest('_site/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('clean', function() {
return gulp.src(['stylesheets', 'javascripts'], {read: false})
.pipe(clean());
});
//Build the Jekyll Site
gulp.task('jekyll-build', function (done) {
browserSync.notify('Building Jekyll');
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', ['jekyll-build'], function() {
browserSync.init(null, {
server: {
baseDir: '_site'
},
host: "localhost"
});
});
gulp.task('watch', function() {
// Watch .sass files
gulp.watch('components/sass/**/*.scss', ['styles']);
// Watch .js files
gulp.watch(jsSources, ['scripts']);
// Watch html files
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'browser-sync', 'html', 'watch');
});
You have to specify the dependencies to your html and style tasks in the jekyll-build task:
gulp.task('jekyll-build', ['styles', 'html'], function (done) {
...
}
You also need to change your html task adding a return before gulp.src.
I'm having a strange issue with gulp and my images directory. I have a range of images in src/img, but after I run gulp, every single image in the output folder dist/img is an exact copy of the last image in the source directory, but with the correct filenames.
This was working fine before, it's just gone barmy recently for no apparent reason.
Here is my gulpfile.js, adapted from this blog post:
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
lr = require('tiny-lr'),
server = lr();
// Styles
gulp.task('styles', function() {
return gulp.src('src/css/main.sass')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(livereload(server))
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// .pipe(jshint('.jshintrc'))
// .pipe(jshint.reporter('default'))
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/js/**/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(livereload(server))
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(livereload(server))
.pipe(gulp.dest('dist/img'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function() {
return gulp.src(['dist'], {read: false})
.pipe(clean());
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.run('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Listen on port 35729
server.listen(35729, function (err) {
if (err) {
return console.log(err)
};
// Watch .sass files
gulp.watch('src/css/**/*.sass', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('styles');
});
// Watch .js files
gulp.watch('src/js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('scripts');
});
// Watch image files
gulp.watch('src/img/**/*', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
gulp.run('images');
});
});
});
My guess is that it's the gulp-cache plugin. Remove that from the images task.
A better alternative to the cache plugin (which, in my opinion, has too much "magic") is the gulp-newer plugin, which simple filters the file list based on the last-modified date of the files. It's much simpler, and less magical.