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.
Related
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?
I have the following code in gulpfile.js file
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
gulp.task('sass', function(){
gulp.src('assets/src/css/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/dist/css'));
});
gulp.task('scripts', function(){
gulp.src('assets/src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
gulp.task('default', ['sass', 'scripts']);
gulp.task('watch', function(){
gulp.watch('src/css/*.scss', ['sass']);
gulp.watch('src/js/*.js', ['scripts']);
});
I want to add browserSync to this file. The example here is containing just the sass plugin. I need to add the following
Uglify & concat the JS and CSS files.
BrowserSync to update my html files.
How can I implement the above?
Add .pipe(browserSync.stream()) in the task in the place you would like it to take place.
This should probably be the last action.
gulp.task('scripts', function(){
gulp.src('assets/src/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'))
.pipe(browserSync.stream());
});
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}));
});
I'm using the latest version on Foundation 6.2 and have added Babel to the project. When I add new scripts to Concat and Uglify these don't work but in the Gulp file I comment out Babel the scripts work fine.
I've added my Gulp file below, babel is only needed for Foundations bower_compnents.
Any help would be very helpful.
Jemes
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
// Sass
gulp.task('sass', function() {
return gulp.src('src/scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src(['src/js/assets/jquery.js', 'bower_components/foundation-sites/dist/foundation.js', 'src/js/assets/jquery-scrolltofixed.js', 'src/js/assets/app.js'])
.pipe($.babel())
.pipe($.concat('app.js'))
.pipe(gulp.dest('src/js/built/'))
.pipe($.rename({ suffix: '.min' }))
.pipe($.uglify({mangle:false}))
.pipe(gulp.dest('js/'))
.pipe($.notify({ message: 'Scripts task complete' }));
});
// Default task
gulp.task('default', ['sass','scripts'], function() {
// Watch .scss files
gulp.watch('src/scss/**/*.scss', ['sass']);
// Watch .js files
gulp.watch('src/js/**/*.js', ['scripts']);
});
I've just started to learn gulp and I'm trying to use gulp-connect https://www.npmjs.com/package/gulp-connect.
This is my files structure
And it's my gulpfile.js file
var gulp = require('gulp'),
concatCss = require('gulp-concat-css'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect');
// server connect
gulp.task('connect', function() {
connect.server({
root: [__dirname],
livereload: true
});
});
// css
gulp.task('css', function () {
return gulp.src('css/*.css')
/*.pipe(notify('Done!'))*/
.pipe(autoprefixer({
browsers: ['> 1%', 'IE 7']
}))
.pipe(concatCss("style.css"))
.pipe(minifyCss())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('dist/'))
.pipe(connect.reload());
});
//html
gulp.task('html', function(){
gulp.src('index.html')
.pipe(connect.reload());
});
// watch
gulp.task('watch', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
// default
gulp.task('default', ['connect', 'html', 'css', 'watch']);
I don't undestand why all works correctly when I use command gulp in node.js console, but if I try to use command gulp watch I get an error in browser console
http://localhost:8080/ net::ERR_CONNECTION_REFUSED
What did I do wrong?
You're not running 'connect' task when running 'watch'.
Reformat your tasks like this
gulp.task('watch:assets', function () {
gulp.watch('css/*.css', ['css']);
gulp.watch('index.html', ['html']);
});
gulp.task('default', ['connect', 'html', 'css', 'watch:assets']);
gulp.task('watch', ['connect', 'watch:assets']);
Go back to terminal and run
gulp watch