gulp watch is not watching after first call - gulp

I have a problem with gulp watch.
After I call it for the first time, and after I make changes to the sass files, there are no changes in the terminal. Only if I re-invoke the gulp-watch I see the change of styles.
My gulpfile.js looks like this:
'use strict'
var gulp = require('gulp');
var sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
watch = require('gulp-watch');
gulp.task('html', function() {
return gulp.src('assets/*.html')
.pipe(gulp.dest('public'));
});
gulp.task('sass', function() {
return gulp.src('assets/css/main.scss')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(gulp.dest("public/css"));
})
gulp.task('scripts', function() {
return gulp.src('assets/javascript/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('public/javascript'));
})
gulp.task('imgs', function() {
return gulp.src("assets/images/*.+(jpg|jpeg|png|gif)")
.pipe(imagemin({
progressive: true,
svgoPlugins: [{ removeViewBox: false }],
interlaced: true
}))
.pipe(gulp.dest("public/images"))
})
gulp.task("watch", function() {
watch("assets/*.html", ["html"]);
watch("assets/css/*.scss", ["sass"]);
watch("assets/javascript/*.js", ["scripts"]);
watch("assets/images/*.+(jpg|jpeg|png|gif)", ["imgs"]);
});
gulp.task("default", ["html", "sass", "scripts", "imgs", "watch"]);
Question.
Why gulp watch does not track changes after calling gulp watch or gulp default?

Related

gulp-nunjucks-render is taking a lot of time to compile

I am using gulp-nunjucks-render for HTML templating.
The problem is, it is taking more than 3-4 minutes to compile. Even though I have only seven nunjucks templates.
'use strict';
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
connect = require('gulp-connect'),
sourcemaps = require('gulp-sourcemaps'),
nunjucksRender = require('gulp-nunjucks-render'),
browserSync = require('browser-sync');
gulp.task('html', function(){
gulp.src('build/*.html')
.pipe(browserSync.reload({stream: true}))
});
gulp.task('nunjucksRender', function(){
gulp.src('sources/html/**/*.+(html|nunjucks)')
.pipe(nunjucksRender({
path: ['sources/html/']
}))
.pipe(gulp.dest('build/'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('css', function(){
gulp.src('sources/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'})
.on('error', sass.logError)
)
.pipe(autoprefixer({
browsers: ['last 50 versions']
}))
// .pipe(minifyCSS())
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('js', function() {
gulp.src('sources/**/*.js',)
// concat pulls all our files together before minifying them
.pipe( concat('main.min.js') )
// .pipe(uglify())
.pipe(gulp.dest('build/js'))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', function(){
gulp.watch('build/*.html', ['html', 'nunjucksRender']);
gulp.watch('sources/**/*.nunjucks', ['nunjucksRender']);
gulp.watch('sources/scss/**/*.scss', ['css']);
gulp.watch('sources/js/**/*.js', ['js']);
});
gulp.task('browserSync', function(){
browserSync({
server: {
baseDir: 'build'
}
});
});
gulp.task('default', ['css', 'html']);
gulp.task('start', ['browserSync', 'watch']);
Here is how it looks like when compilation is finished
Is there any gulp plugin to reduce compile time or compile only those files which are changed?
here is the github repo in case you need to see full file structure.
Ah.. I was watching .html and .nunjucks files for changes.. so when .nunjucks file compiles and creates .html file then again .html related task runs.

Gulp not creating js sourcemaps file

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'));
});

Compile gulp sass into the serve task

I make this gulp tasks: sass, serve, watch, but I'm trying to run gulp sass when the gulp watch into the gulp serve is activate but it's not work.
I need when I do a change into the sass file, this compile and show in realtime in the browser.
Any help ?
var gulp = require('gulp'),
browserSync = require('browser-sync'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
sass = require('gulp-sass');
gulp.task('serve', function() {
browserSync.init({
notify: false,
port: 3005,
server: {
baseDir: ["app"],
routes: {
'/bower_components': 'bower_components'
}
}
})
gulp.watch(['app/**/*.*']).on('change', browserSync.reload);
});
gulp.task('sass', function() {
var processors = [
autoprefixer({ browsers: ['last 2 versions']})
];
return gulp.src('./app/sass/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('./app/css'));
});
gulp.task('watch', ['sass'], function() {
gulp.watch('./app/sass/*.scss', ['sass']);
});
gulp.task('default', ['sass']);
Adding .pipe(browserSync.reload({stream: true})) to your sass task pipe should make browsersync reload only the compiled css.
Here's an example of your gulp task
gulp.task('sass', function() {
var processors = [
autoprefixer({ browsers: ['last 2 versions']})
];
return gulp.src('./app/sass/*.scss')
.pipe(sass().on('error',sass.logError))
.pipe(postcss(processors))
.pipe(gulp.dest('./app/css'))
.pipe(browserSync.reload({stream: true}));
});

Gulp is taking ages to execute tasks

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)

Having issues with Gulp.js file and Jekyll

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.