Here is the 'usemin' section of the gulpfile.js
// usemin Task
gulp.task('usemin', function() {
gulp.src('./*.html')
.pipe(usemin({
css: [minifyCss(), 'concat'],
html: [minifyHtml({empty: true})],
js: [uglify(), rev()]
}))
.pipe(gulp.dest('build/'));
});
When I run 'gulp' it generates all the files I need in the build folder but does not update the links in the index.html file with the newly generated files (minified and concatenated).
Can anyone help me with what I am doing wrong?
Related
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.
I am using Gulp to compile my bootstrap.less file into a bootstrap.css file. All the bootstrap LESS files are in a "less" folder and all of the CSS files are in a CSS folder. All of the bootstrap less files are #import'd into bootstrap.less and then that file is compiled to bootstrap.css. However I have one custom.less file that is in the bootstrap LESS folder. I would like to compile into a custom.css file in the CSS folder. I cannot get Gulp to do this. Here is my code.
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src(['./less/bootstrap.less', './less/custom.less'])
.pipe(less())
.pipe(gulp.dest("./css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('serve', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./less/*.less', ['less']);
gulp.watch(['./**/*.html', './js/custom.js']).on('change',
browserSync.reload);
});
gulp.task( 'default', ['less', 'serve']);
What I usually do is compile all .less or .scss files into css folder. You will end up with a few empty files (a good example would be .less files that contain variables) but on the other hand you can create a gulp task to clear those files out. I use the following code to compile:
return gulp.src("Styles/scss/*.scss")
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("Styles/css"))
.pipe(reload({stream: true}));
I'm also generating sourcemaps here but you can remove that. If you would like to discover more checkout this post here
Hope this helps ;)
I have one CSS manipulation in a CSS task. Now I need to have one more, and I want to place it in the same gulp task. But it's not working.
Original code:
gulp.task('css', function() {
gulp.src('./assets/css/*.css')
.pipe(cleanCSS())
.pipe(size())
.pipe(gulp.dest('./dist/css/'));
});
What I want to achieve:
gulp.task('css', function() {
gulp.src('./assets/css/*.css')
.pipe(cleanCSS())
.pipe(size())
.pipe(gulp.dest('./dist/css/'))
/* Handle CSS from custom directory */
.pipe(gulp.src('./assets/css/templates/*.css'))
.pipe(cleanCSS())
.pipe(size())
.pipe(gulp.dest('./dist/css/templates/'));
});
But the CSS from the templates folder don't get copied to the templates output folder.
I have wanted to delete two folders inside the folder 'dest' so I did
gulp.task('del', function () {
// add task
return gulp.src('./app/static/dest', {read: false})
.pipe(clean());
});
Under dest folder, there are js and css folder and inside them there are js and css files respectively. When I run gulp, it deletes js folder and files successfully but does not delete the css files. What is the problem?
By the way the default task function is:
gulp.task('default', ['del'], function() {
gulp.start('transform');
gulp.start('styles');
gulp.watch('./app/static/src/js/*.js', ['transform'])
gulp.watch('./app/static/src/css/*.scss', ['styles'])
});
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));
});