I am using gulp with gulp-pug so that I can split my template into reusable components. Pug grabs any existing *.pug(jade) files and converts them to generic html files on browser-sync and/or project build (in my case).
gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
.pipe(changed('src', {
extension: '.html'
}))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('src/'))
});
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/views/**/*.pug', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
});
gulp.task('default', function (callback) {
runSequence(['views', 'sass', 'browserSync', 'watch'],
callback
);
});
And this is the basic pug index with included partials
doctype html
html(lang='en')
include partials/head.pug
body
<!-- content -->
include partials/footer.pug
include partials/scripts.pug
Everything is running smoothly except for one thing, my views folder structure is as follows:
views
--- partials
--- *
--- *
--- etc.
--- index
When I make changes in one of my partials (the pug files inside the partials folder) and I save, the live-reload functionality works as expected, but the *.pug files are not being parsed. When I save the index.pug however, files are converted and the page loads the new content.
What am I doing wrong and where?
P.S. Even when editing the index file, I have to manually refresh the page from time to time so it can render the page instead of a blank slate.
A tiny, but big mistake here. I was also live-reloading the pug files, which causes some confusion to the parser.
My watch task looked like this:
gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/views/**/*.pug', ['views']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/views/**/*.pug', browserSync.reload);
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
});
Now, I removed this line:
gulp.watch('src/views/**/*.pug', browserSync.reload);
which made no sense, but I found it.
You only need to watch for changes in the html files.
Related
This code is working perfectly, it will optimize all images in folder and that is ok if I need to call the task manually using gulp images.
But usually I just do gulp watch and for that all images previously added don't need to be reoptimised.
So, how can gulp optimize only the image that was just added to folder, and not all of them?
gulp.task('images', function() {
gulp.src('images/src/*.{png,jpg,gif}')
.pipe(plumber(plumberErrorHandler))
.pipe(imagemin({
optimizationLevel: 7,
progressive: true
}))
.pipe(gulp.dest('images'))
.pipe(notify("Images optimized."));
});
gulp.task('watch', function() {
gulp.watch('images/src/*.{png,jpg,gif}', ['images']);
});
gulp-changed should serve this purpose.
Basically it compares the files' last-modified property if the source is newer than the destination he passes it down the stream, otherwise it's removed from it.
There is the following gulp tasks:
// Processing templates task
gulp.task('templates', function() {
return gulp.src('app/**/*.slim')
.pipe(slim({pretty: true}))
.pipe(minifyHTML())
.pipe(gulp.dest(dist));
});
// Watching files for changes task
gulp.task('watch', function() {
gulp.watch('app/**/*.slim', ['templates']);
});
As you can see templates task finds and transforms all .slim files in .html file. It works good. Also there is watch task which watches changes and executes templates task after it. But I want that after watch task finds some changes in template A gulp will transform only template A, not all templates. I don't understand how I can get changed file and transform it. Please, help me. Thanks in advance.
I think you can try Incremental build.
gulp.task('default', function () {
return gulp.src('app/**/*.slim')
.pipe(watch('app/**/*.slim'))
.pipe(slim({pretty: true}))
.pipe(minifyHTML())
.pipe(gulp.dest(dist));
});
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.
I'm trying to compile all the .less files to css, and leave .import.less files unprocessed (similar to Meteor less package). My file structure is as follow:
assets/less/normalize.less
assets/less/main.less
assets/less/header.import.less
assets/less/footer.import.less
assets/less/...
My lessCompile task works fine by itself (i.e. run it manually by gulp lessCompile).
gulp.task('lessCompile', function() {
gulp.src(['assets/less/main.less', '!assets/less/*.import.less'])
.pipe(less())
.pipe(autoprefix('last 2 version'))
.pipe(minifyCSS({ advanced: true }))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('public/stylesheets'));
});
Now I add a watch to all the .less files to automate the compilation.
gulp.task('default', ['lessCompile'], function () {
gulp.watch('assets/less/*.less', ['lessCompile']);
});
Problem is after I edited assets/less/footer.import.less , lessCompile task re-ran itself and all the styles in footer.import.less disappeared from the minified style.min.css. The same disappearance goes for editing any other *.import.less such as header.import.less. Also, there are no errors during the re-compile process.
Building myself a gulpfile.js for a WordPress theme. Currently all the JS and CSS is working perfectly, and livereload is reloading on css/js change.
But I also want to refresh the browser whenever a PHP file is changed. I did some searching and found the following snipped which I'm using within my gulpfile.js
gulp.task('watch', function(){
// Listen on port 35729 for LiveReload
server.listen(35729, function (err) {if (err) {return console.log(err) };
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
gulp.watch('**/*.php').on('change', function(file) {
util.log('PHP FILES CHANGED!');
server.changed(file.path);
});
});
});
Whenever I change a PHP file I can see "PHP FILES CHANGED!" in the console, but livereload does not update the browser. What am I missing?
Did some further research and testing, and it turns there's no point in using tiny-lr since gulp-livereload does everything. So I changed my tasks to do the reloading by .pipe(livereload()); – and changed my watch task to the following:
gulp.task('watch', function(){
var server = livereload();
gulp.watch('**/*.php').on('change', function(file) {
server.changed(file.path);
util.log(util.colors.yellow('PHP file changed' + ' (' + file.path + ')'));
});
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
});
There's a shorter solution that maybe useful to those using gulp-livereload. There's a reload method that can be triggered. Like so:
gulp.task('watch', function(){
livereload.listen();
gulp.watch('source/*.php', livereload.reload);
});