This is my gulpfile.js
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify'); // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
var lint = require('gulp-eslint'); //Lint JS files, including JSX
var livereload = require('gulp-livereload');
var sass = require('gulp-sass');
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
scss: [
'node_modules/font-awesome/scss/font-awesome.scss',
'./src/scss/default.scss'
],
sassBuilds: './src/builds/css/',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./src/builds/css/*.css'
],
fonts:[
'node_modules/font-awesome/fonts/**.*'
],
dist: './dist',
mainJs: './src/main.js'
}
}
//Start my local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function() {
gulp.src('dist/index.html')
.pipe(open({ uri: config.devBaseUrl + ':' + config.port + '/', app: 'Chrome'}));
});
gulp.task('livereload', function (){
gulp.src('./src/**/*')
.pipe(connect.reload());
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('js', function() {
browserify(config.paths.mainJs)
.transform(reactify) //this would 'bundle' the JSX
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('css', function() {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'));
});
gulp.task('lint', function() {
return gulp.src(config.paths.js)
.pipe(lint({config: 'eslint.config.json'}))
.pipe(lint.format());
});
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html', 'livereload']);
gulp.watch(config.paths.scss, ['sass', 'livereload']);
gulp.watch(config.paths.js, ['js', 'lint']);
});
gulp.task('sass', function () {
return gulp.src(config.paths.scss)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(config.paths.sassBuilds));
});
gulp.task('icons', function() {
return gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/fonts'));
});
gulp.task('default', ['html', 'sass', 'js', 'lint', 'css', 'icons', 'open', 'watch']);
sass task first runs to create 2 css files into builds/css/
After that css task runs and should concat all css files from the config.paths.css but it doesn't, only watch task does and barely, sometimes it does, sometimes it doesn't (seriously). I feel there is some spaghetti going on here.
If you are expecting that the sass task will always finish before the css task starts Don't. From the gulp documentation
Note: The tasks will run in parallel (all at once), so don't assume that the tasks will start/finish in order.
The usual way to fix this is to make the css task wait for the sass task to finish by:
gulp.task('css', ['sass'], function() {
Related
my gulp watch keeps on a rebuild after saving js file, the Scss file working well, the problem is when saving other files inside the project folder, changing or replacing images, triggers the rebuild to start and finish building dist folder.
only while saving Scss files, the build starts and finishes as accepted.
terminal output:
[17:53:11] Starting 'js-build'...
[17:53:11] Finished 'js-build' after 452 ms
[17:53:11] Starting 'js-build'...
[17:53:12] Finished 'js-build' after 614 ms
[17:53:12] Starting 'js-build'...
please advice?
my gulp code:
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
babel = require('gulp-babel');
uglify = require('gulp-uglify-es').default,
cssnano = require('gulp-cssnano'),
plumber = require('gulp-plumber'),
gcmq = require('gulp-group-css-media-queries'),
rename = require('gulp-rename'),
pngquant = require('imagemin-pngquant'),
cache = require('gulp-cache'),
concat = require('gulp-concat'),
del = require('del'),
sass = require('gulp-sass'),
scss = require('gulp-scss'),
browserSync = require('browser-sync'),
server = browserSync.create(),
fileinclude = require('gulp-file-include');
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
server: {
baseDir: './dist'
}
});
done();
}
gulp.task('html', function() {
return gulp.src('*.html')
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('dist'))
});
var scssFiles = [
'./scss/**/*.scss',
'!./node_modules/**',
'!./dist/**',
];
var jsFiles = [
'**/*.js',
'!./node_modules/**',
'!gulpfile.js',
'!./dist/**',
];
var imgFiles = [
'**/*.{jpg,png,jpeg,svg,gif,ico}',
'!./node_modules/**',
'!./dist/**',
];
var fontFiles = [
'fonts/**/*.*',
'!./node_modules/**',
'!./dist/**',
];
gulp.task('scss', function() {
var postCSSplugins = [
autoprefixer({ browsers: ['last 2 version'] }),
];
return gulp.src(scssFiles)
.pipe(sass())
// .pipe(concat('app.css'))
.pipe(plumber()) //if need unoptimezed file - comment this line
.pipe(gcmq()) //if need unoptimezed file - comment this line
.pipe(cssnano()) //if need unoptimezed file - comment this line
.pipe(gulp.dest('dist/css/'))
.pipe(server.stream()) //if need unoptimezed file - comment this line
});
gulp.task('js-build', function () {
return gulp.src(jsFiles)
.pipe(plumber())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('img', function() {
return gulp.src(imgFiles)
.pipe(gulp.dest('dist/'))
});
gulp.task('font', function() {
return gulp.src(fontFiles)
.pipe(gulp.dest('dist/fonts'))
});
gulp.task('watch', function() {
gulp.watch(scssFiles, gulp.series('scss'), reload);
gulp.watch('*.html', gulp.series('html'));
gulp.watch(jsFiles, gulp.series('js-build'));
gulp.watch(imgFiles, gulp.series('img'));
});
gulp.task('clean', function() {
return del('./dist');
});
gulp.task('build', gulp.parallel('scss', 'html', 'js-build', 'img', 'font'));
gulp.task('serve', gulp.parallel('watch', serve));
gulp.task('default', gulp.series('clean', 'build', 'serve'));
When calling gulp the site and its assets are generated correctly once. The watch tasks start, but they never register new changes nor refresh the browser with Browsersync.
My goal is to have a full automation in the build process. For example, if _config.yml changes Jekyll will rebuild itself. Same idea applies to every file.
What I have tried so far:
Creating separate gulp.watch tasks for build:scripts, build:styles, build:images and build:jekyll.
Calling .on('change', browserSync.reload) on every separate gulp.watch task
Creating .pipe(browserSync.reload({stream: true})) in build:styles, build:images, build:scripts and build:jekyll
Here are the contents of gulpfile.js:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream());
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand))
browserSync.reload();
callback();
});
gulp.task('clean', function() {
return del(['_site', 'assets']);
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['build']).on('change', browserSync.reload);
});
gulp.task('default', ['watch']);
Why would Browsersync and Jekyll register the changes correctly?
I have managed to get Browsersync see all the changes in the needed files and reload browser with the following gulpfile.js tasks:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('clean', function() {
return del(['_site', '.publish', 'assets']);
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'));
});
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'));
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand));
callback();
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('rebuild', ['build'], function(){
browserSync.reload();
});
gulp.task('default', ['build'], function() {
// maybe important (injectChanges: true)
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['rebuild']);
});
I have been struggling for a while now and it is fairly frustrating to be honest.
The problem:
I created a gulpfile for my static website, and all i want to do is use browserSync, to compile sass into css and to minify the script and css files. Everything works fine, excluding one thing:
When I run "gulp" everything loads, besides de css file, which is located in "CSS/". Apparently the server thinks that the css file is ("CSS/style.css/") a folder actually.
Screenshot with the console error:
image
the css file is located in "css/style.css"
"use strict";
let paths = {
script: "js/*.js",
minifiedScript: 'script.min.js',
cssPath: "css/*.css",
productionFolder: "production",
sassPath: "scss/*.scss",
htmlFiles: "*.html"
};
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const browserSync = require('browser-sync').create();
const cssMin = require('gulp-css');
const sass = require('gulp-sass');
const inject = require('gulp-inject');
const rename = require("gulp-rename");
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src(paths.sassPath)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
gulp.task('index', function () {
var target = gulp.src('index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src([paths.script,paths.cssPath], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest(''));
});
gulp.task('cssMinify', function(){
return gulp.src(paths.cssPath)
.pipe(cssMin())
.pipe(gulp.dest(paths.productionFolder + "/minified css"))
.pipe(browserSync.stream());
});
gulp.task('clean', function() {
// You can use multiple globbing patterns as you would with `gulp.src`
return del(['build']);
});
gulp.task('scripts', ['clean'], function() {
// Minify and copy the JS file
return gulp.src(paths.script)
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat(paths.minifiedScript))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.productionFolder + "/minified JS"));
});
gulp.task('jsMinify:watch', function() { gulp.watch(paths.script, ['scripts']) });
gulp.task('sass:watch', function() { gulp.watch(paths.sassPath, ['sass']) });
gulp.task('cssMinify:watch', function() { gulp.watch(paths.cssPath, ['cssMinify']) });
gulp.task('html:watch', function() { gulp.watch(paths.htmlFiles).on('change', browserSync.reload) });
gulp.task('default', ['sass', 'index', 'cssMinify', 'clean', 'html:watch', 'jsMinify:watch', 'sass:watch', 'cssMinify:watch','browserSync', 'scripts']); // DEVELOPMENT
Here is the snapshot of command prompt when I run gulp. Previously it used to work correctly but now, it is showing some weird errors.
my view folder is supposed to contain only templates, so why is it displaying bootstrap.social.css not found?
and my project folder looks like-
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
views-
various html templates
bower_components-...
dist-..
node_modules-...
gulpfile.js
package.json
...
here is my gulpfile.js' code:
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
ngannotate = require('gulp-ng-annotate'),
del = require('del');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[minifycss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'));
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am trying to make it so after I save a change to my *.scss files that the browser-sync window reloads.
It currently works fine when I save *.html files but I am not sure how to get it working for the SASS files.
Here is my gulp file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
// config
var config = {
sassInput: 'sass/',
sassOutput: 'src/css/',
publicRoot: 'src/',
}
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(config.sassInput + '*.scss')
.pipe(sass())
.pipe(gulp.dest(config.sassOutput))
.pipe(browserSync.reload);
});
// vendor prefixes
gulp.task('prefix', function () {
return gulp.src(config.sassOutput)
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest(config.publicRoot));
});
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: config.publicRoot
}
});
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch(config.sassInput + '*.scss', ['sass'], browserSync.reload);
gulp.watch(config.publicRoot + '*.html', browserSync.reload);
});
// Default Task
gulp.task('default', ['sass', 'prefix', 'browser-sync', 'watch']);
The problem was I needed to call stream().
Here is working function:
gulp.task('sass', function () {
return gulp.src(config.sassInput + '*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(config.sassOutput))
.pipe(browserSync.stream());
});