I'm trying to setup CSS preprocessing and browser-sync for a client on windows. Prepros seems to be junk, and he can't use codeKit because it's Mac only.
I gave him these resources: https://webdesign.tutsplus.com/tutorials/supercharge-your-local-wordpress-development--cms-28303 and https://browsersync.io/docs/gulp
The preprocessing works great, but the browser has to be manually refreshed to see the CSS changes.
Can you spot what is incorrect in this code? MAMP is also involved... so it could be something else. I'm trying out different configurations to trouble-shoot.
// gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');
var stylus = require('gulp-stylus');
gulp.task('setup-server', function() {
var files = [
'./style.css',
'./*.php',
];
browserSync.init(files, {
proxy: 'https://website-name.dev',
});
});
gulp.task('compile-stylus', function () {
return gulp.src('stylus/*.styl')
.pipe( stylus({
// options
}))
.pipe( gulp.dest('./') ) // root of theme
.pipe( browserSync.stream() )
;
});
gulp.task('default', ['setup-server', 'compile-stylus'], function() {
gulp.watch('stylus/**/*.styl', ['compile-stylus']);
});
file structure
project-root
gulpfile.js
/stylus
/partials
style.styl
Try these changes:
var browserSync = require("browser-sync").create();
var reload = browserSync.reload;
and the following change at the end of the task:
gulp.task('compile-stylus', function () {
return gulp.src('stylus/*.styl')
.pipe( stylus({
// options
}))
.pipe( gulp.dest('./') ) // root of theme
.pipe( browserSync.reload({stream: true}));
});
And I assume you meant gulpfile.js not gruntfile.js in your folder structure.
Related
//Importing gulp files to variables
const { src , dest , watch , series , parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const browserSync = require ('browser-sync').create();
// File path variables in my projects folder
const files = {
scsspath:'assets/scss/**/*.scss' ,
jspath:'assets/js/**/*.js'}
//Sass Task
function scssTask(){
return src(files.scsspath)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write('.'))
.pipe(dest('assets/css'))
.pipe(browsersync.stream());}
//JsTask
function jsTask(){
return src(files.jspath)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('assets/js')).pipe(browsersync.stream());}
//WatchTask
function watchTask(){
watch([files.scsspath , files.jspath], parallel(scssTask,jsTask));}
//DefaultTask
//I don't know how to use browser-sync in gulp-4
exports.default = series(parallel(scssTask,jsTask) , cashBustTask ,
watchTask,browsersync);
Create a separate task for browser-sync. Here's an example of how I've set this up:
const bs = require('browser-sync').create();
// Other inputs used with browser-sync
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass');
function browserSync() {
// Run serveSass function when starting the dev server to make sure the SCSS & dev CSS are the same
serveSass();
bs.init({
// Dev server will run at localhost:8080
port: 8080,
server: {
// I'm using 'src' as my base directory
baseDir: 'src',
},
});
// These watch for changes to files and reload in the browser
watch('src/*.html').on('change', bs.reload);
watch('src/scss/*.scss', serveSass);
watch('src/js/*.js').on('change', bs.reload);
}
// This compiles Sass when running browser-sync and reloads the CSS
function serveSass() {
// My dev Sass files are found in 'src/scss/'
return src('src/scss/*.scss')
.pipe(sass())
// My dev CSS files are found in 'src/css/'
.pipe(dest('src/css))
.pipe(bs.stream());
}
// Then I run 'gulp serve' in the terminal to start browser-sync and my dev server
exports.serve = browserSync;
My full Gulp setup is here if you want more context.
Quick solution:
Add a function to trigger BrowserSync:
function reload(){
browserSync.reload();
}
Modify your watchTask() function to:
function watchTask(){
browserSync.init({
server: { baseDir: "./dist" }
});
gulp.watch([files.scsspath , files.jspath], parallel(scssTask,jsTask,reload));
}
Modify your exports to:
exports.default = watchTask;
I found this guide to upgrade gulp 4, that explains that gulp.series or gulp.parallel needs to be used. Example:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browserSyncReload', gulp.series( function(done) {
browserSync.reload();
done();
}));
gulp.task('default', gulp.series( function(done) {
browserSync.init({
notify: false,
proxy: "127.0.0.1:5003/nl"
});
gulp.watch("app/templates/**/*.", gulp.series('browserSyncReload'));
gulp.watch("app/static/**/*.*", gulp.series('browserSyncReload'));
done();
}));
Here I have a watch task that will create my build directory according to my src. My build directory will contain two main sub directories named debug and release. Watch task will look inside of my src directory(my working directory) and will transfer appropriate format of files inside the src into both release and debug directories. Now I also have a webserver task using gulp-webserver(live reloading) package in order to watching my index.html file inside my debug directory. My problem is that each task works independently, but I don't know how run them simultaneously. Here is what I've tried but it didn't work(just one of them will be start). Let me know if further information is needed.
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
.
.
.
var default_tasks = ['build', 'webserver', 'watch'];
gulp.task('default',gulp.series('clean',...default_tasks));
EDIT:
Here is my full gulpfile.js:
const gulp = require('gulp');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const del = require('del');
const webServer = require('gulp-webserver');
//-------------------------------------------------------------------------------------------------
const build_tasks=['js','js-min','sass','sass-min','cp','cp-min'];
const buildOptions={
releasePath:'build/release/',
debugPath:'build/debug/',
};
const pathJS = 'src/js/**/*.js'
const pathSCSS = 'src/style/**/*.scss'
//-------------------------------------------------------------------------------------------------
// JavaScript Task
gulp.task('js',()=>{
return gulp.src([pathJS])
.pipe(gulp.dest(buildOptions.debugPath+'/js/'));
});
gulp.task('js-min',()=>{
return gulp.src([pathJS])
.pipe(uglify().on('error',uglify=>console.error(uglify.message)))
.pipe(gulp.dest(buildOptions.releasePath+'/js/'));
})
// sass Task
gulp.task('sass',()=>{
return gulp.src([pathSCSS])
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest(buildOptions.debugPath+'/style/'));
});
gulp.task('sass-min',()=>{
return gulp.src([pathSCSS])
.pipe(sass({outputStyle: 'compressed'}).on('error',sass.logError))
.pipe(gulp.dest(buildOptions.releasePath+'/style/'))
})
// copy files
gulp.task('cp',()=>{
return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
.pipe(gulp.dest(buildOptions.debugPath));
});
gulp.task('cp-min',()=>{
return gulp.src(['src/**/*.*','!'+pathJS,'!'+pathSCSS])
.pipe(gulp.dest(buildOptions.releasePath));
});
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
//-------------------------------------------------------------------------------------------------
gulp.task('clean',function(){return del(['build']);});
gulp.task('build',gulp.parallel(...build_tasks));
//-------------------------------------------------------------------------------------------------
function build(){
var default_tasks = ['build', 'webserver', 'watch'];
//var default_tasks = ['build', 'watch'];
gulp.task('default',gulp.series('clean',...default_tasks));
}
build();
I solve my problem by using gulp.parallel for both webserver and watch tasks :
// watch
gulp.task('watch',()=>{
gulp.watch(pathJS,gulp.series('js','js-min'));
gulp.watch(pathSCSS,gulp.series('sass','sass-min'));
gulp.watch(['src/**/*.*','!'+pathJS,'!'+pathSCSS],gulp.series('cp','cp-min'));
});
// webserver
gulp.task('webserver',()=>{
gulp.src(buildOptions.debugPath)
.pipe(webServer({
fallback: 'index.html',
port:'4000',
livereload:true,
open:true
}))
});
.
.
.
gulp.task('default',gulp.series('clean','build',gulp.parallel('webserver', 'watch')));//Here is my change!
I am trying to streamline my workflow and include templating. I installed Nunjucks and tried to set it up so whenever I save a change to a template file gulp watch will fire the nunjucks function and refresh my browser.(firefoxdeveloperedition)
It works at first, but then my browser stops reloading the changes. Every time I save the browser will refresh but the changes do not appear. Here is my gulpfile(i removed the other tasks from this but keep the requirements in so you can see the modules i have installed)
/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */
//Compile sass into css
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages
return gulp.src('app/pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['app/templates']
}))
// output files in app folder
.pipe(gulp.dest('app'))
});
//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
// Other watchers
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
browser: ['firefoxdeveloperedition']
})
})
Is my code wrong?
EDIT: After some more testing it actually seems to be tied to Firefox Developer Edition...
I have a problem with the linting and live reloading in my gulp file. They take to much time to finish.
Here is my gulp file, what do I do wrong :
'use strict';
console.time("Loading plugins"); //start measuring
var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");
var config = {
port: 8001,
devBaseUrl: 'http://localhost',
paths: {
html: "./src/*.html",
externals: "./src/assets/externals/*.js",
js: "./src/**/*.js",
images: './src/assets/images/**/*',
fonts: './src/assets/css/fonts/*',
css: [
"./src/assets/css/*",
],
sass: './src/assets/css/*.scss',
dist: "./dist",
mainJS: "./src/main.js"
}
};
gulp.task('connect', ['watch'], function () {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true,
fallback: './dist/index.html'
})
});
gulp.task('open', ['connect'], function () {
gulp.src('dist/index.html')
.pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});
gulp.task('html', function () {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('externals', function () {
gulp.src(config.paths.externals)
.on('error', console.error.bind(console))
.pipe(concat('external.js'))
.pipe(gulp.dest(config.paths.dist + '/externals'))
.pipe(connect.reload());
});
gulp.task('js', function () {
browserify(config.paths.mainJS)
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('images', function () {
gulp.src(config.paths.images)
.pipe(gulp.dest(config.paths.dist + '/images'));
});
gulp.task('styles', function () {
gulp.src(config.paths.css)
.pipe(sass())
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'))
.pipe(connect.reload());
});
gulp.task('fonts', function () {
gulp.src(config.paths.fonts)
.pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});
gulp.task('lint', function () {
return gulp.src(config.paths.js)
.pipe(lint())
.pipe(lint.format());
});
gulp.task('watch', function () {
gulp.watch(config.paths.js, ['js', 'lint']);
gulp.watch(config.paths.css, ['styles']);
});
console.timeEnd('Loading plugins');
gulp.task('default', ['js', 'styles', 'lint', 'open', 'watch']);
The lint takes almost 20s to finish and liverolading takes 5-6s to refresh the browser after I make some changes.
Any advice?
Gulp ESLint plugin is generally very slow. I compared it to Grunt at some point (a while back) and it was about 5-10 times slower. Don't know why.
Make sure you are running latest version of ESLint and also that you don't have node_modules directory under your src folder. If you do, you can run eslint with --debug flag to make sure that ESLint is not linting files in your node_modules directory. If for some reason it does, add .eslintignore file and specify everything that you don't want to lint there.
In general, if you want instant feedback while coding, I would suggest looking into editor integrations. Pretty much every editor out there has ESLint plugin at this point. They show you errors directly in the window you are writing your code in.
We've recently come across the same issue on my team. The best workaround was to run ESLint only on the modified files, instead of all js files.
We use nodemon to watch for changed files, though gulp-watch has the same idea.
See the change event on gulp-watch.
Then you'd just run a lint function on the changed file.
You may need to resolve the relative file path.
gulp.watch(config.paths.js, ['js'])
.on('change', lintFile);
const lintFile = (file) => {
return gulp.src(file)
.pipe(eslint());
};
Is it necessary to check you code while developing?
We use another approach:
1)Do not check code while developing, because it is long, also it sometimes doesn't allow to create "fast" mock for something while debugging.
2)Check style only before commit. If something is wrong, fix style and check everything works. Also CI system could control your commits.
So, my suggestion is to remove lint from watch task.
I am trying to create a basic gulp build process template that starts with an app folder containing html, sass, javascript, and image files and builds those files into a public folder. I am using gulp to watch the app folder for changes and then automatically refreshing the build process to the public folder.
I using browser-sync to serve the public folder and watch for changes but it doesn't seem to automatically reload when a change to the public folder is made. If I manually refresh the browser the changes are reflected.
Thanks for the help, see below for my gulp file:
//BASIC GULP FILE SETUP
//-------------------------------------------------------------
//Include Gulp
var gulp = require('gulp');
//General Plugins
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var del = require('del');
var watch = require('gulp-watch');
var runSequence = require('run-sequence');
//CSS Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
//JS Plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
//HTML Plugins
var minifyHTML = require('gulp-minify-html');
//IMG Plugins
//-------------------------------------------------------------
//TASKS
//-------------------------------------------------------------
//Clean Public Folder
gulp.task('clean', function() {
del(['public/**/*']);
});
//CSS Tasks
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(gulp.dest('public/css'));
});
//HTML Tasks
gulp.task('html', function () {
return gulp.src(['./app/**/*.html'], {
base: 'app'
})
.pipe(minifyHTML())
.pipe(gulp.dest('public'))
;
});
//Image Tasks
gulp.task('image', function () {
return gulp.src('app/img/**/*.{png,jpg,jpeg,gif,svg}')
.pipe(gulp.dest('public/images'));
});
//JS Tasks
gulp.task('js', function () {
return gulp.src('app/js/**/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js'));
});
// Watch files for changes
gulp.task('watch', function() {
// Watch HTML files
gulp.watch('./app/*.html', ['html'], browserSync.reload);
// Watch Sass files
gulp.watch('./app/sass/**/*.scss', ['sass'], browserSync.reload);
// Watch JS files
gulp.watch('./app/js/**/*', ['js'], browserSync.reload);
// Watch image files
gulp.watch('./app/img/*', ['image'], browserSync.reload);
});
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
});
gulp.task('defualt');
gulp.task('build', [], function(callback) {
runSequence('clean',
'sass',
'html',
'js',
'image');
});
I did a little more poking around the forums and the browser-sync documentation. In my serve task I needed to add a watch function to the Public directory that would manually call the reload every time a change was detected. So my 'browser-sync' task, now renamed 'serve', needs to look like this:
//Browser Sync Server
gulp.task('serve', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
}
});
gulp.watch("./public/**/*").on("change", browserSync.reload);
});
I am sure there is a way to do this with browser-sync's streams as well, but this manual reload method found in the docs has done the trick.
Try passing in a files object in the init function so it knows what to look for. No need for a different watch task, Browsersync does all that for you.
gulp.task('browser-sync', ['watch'], function() {
browserSync.init({
server: {
baseDir: "./public"
},
files: [
'**/*.css',
'**/*.js',
'**/*.html'
// etc...
]
});
});