Answer the question
In order to leave comments, you need to log in
What is the correct gulp setup to work on a more or less large project?
I’ll clarify right away that a more or less large project means the number of templates is more than 5-10.
Because I am engaged in layout of sites switched to gulp + sass + jade. gulpfile example below.
During the build process, I found some problems:
1 - this is a periodic error when compiling sass - that the file was not found, you have to click save several times so that it starts compiling. I never found a solution
2 - with a large amount of compiled html, periodically browser-sync refuses to reload the page, you must manually press F5
3 - browser-sync sometimes 1 time, sometimes 5-6 times reloads the watch page when compiling jade. Those. you pressed ctrl + s went to the browser and see how it reloads the page several times in a row.
I ask for advice on improving gulpfile - what is right or wrong done, this is my first project with this collector, I like it, I want to solve these problems and continue working.
"use strict"
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
uncss = require('gulp-uncss'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
rename = require("gulp-rename"),
minifyCss = require('gulp-minify-css'),
plumber = require('gulp-plumber'),
jade = require('gulp-jade'),
spritesmith = require('gulp.spritesmith'),
browserSync = require('browser-sync');
var plugins = require("gulp-load-plugins")();
// Static server
gulp.task('browser-sync', ['sass', 'html', 'js'], function() {
browserSync.init({
server: {
baseDir: "./"
},
notify: false
});
});
gulp.task('sprite', function () {
var spriteData = gulp.src('assets/img/icon/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.sass',
algorithm : 'top-down'
}));
return spriteData.pipe(gulp.dest('assets/img/icon/sprites/'));
});
// jade
gulp.task('jade', function() {
gulp.src('assets/jade/*.jade')
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('assets/templates'));
})
gulp.task('sass', function() {
gulp.src('assets/css/main.sass')
.pipe(plumber())
.pipe(plugins.sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// .pipe(uncss({
// html: ['*.html']
// }))
.pipe(plugins.sourcemaps.write("./"))
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(rename("main.min.css"))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('html', function(){
gulp.src('./*.html')
.pipe(browserSync.reload({stream:true}))
});
gulp.task('js', function(){
gulp.src('assets/**/*.js')
.pipe(browserSync.reload({stream:true}))
});
gulp.task('watch', function () {
gulp.watch('assets/css/**/*.sass', ['sass']);
gulp.watch('assets/templates/*.html', ['html']);
gulp.watch('assets/jade/**/*.jade', ['jade']);
gulp.watch('assets/**/*.js', ['js']);
});
gulp.task('default', ['browser-sync', 'watch']);
Answer the question
In order to leave comments, you need to log in
There were the same problems, the solution was to completely rewrite the gulp file, + set the atomic sever mode to the sublime..
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question