Hi im trying to get a gulp watch on the go in my gulp.js file. It needs to run my sass and minify it and set to destination folder on watch. Can anybody help please?
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var htmlmin = require('gulp-html-minifier');
gulp.task('sass', function(){
return gulp.src('scss/styles.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(minifyCss())
.pipe(gulp.dest('dest'))
});
gulp.task('minify-css', function() {
return gulp.src('dest/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dest'));
});
gulp.task('compress', function() {
return gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('minify-html', function() {
gulp.src('*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(''))
});
// Watch Files For Changes
gulp.task('watch', function(){
gulp.watch('scss/*.scss', ['sass']);
// Other watchers
})
// Run all Refinedby Tasks
gulp.task('all', ['sass']);
You need to load the watcher when you call your "all task command".
gulp.task('all', ['sass'], function() {
gulp.watch('scss/*.scss', ['sass']);
});
or
gulp.task('all', ['sass'], function() {
gulp.start('watch');
});
or if you do not want to change your code just add
// Run all Refinedby Tasks
gulp.task('all', ['sass', 'watch']);
Related
I have created a gulpfile.js file for a project I'm building. When I try to run it, I get this error.
[18:29:03] Using gulpfile ~\Documents\codeprojects\antenna\gulpfile.js
[18:29:03] Starting 'default'...
[18:29:03] Starting 'sass'...
[18:29:03] The following tasks did not complete: default, sass
[18:29:03] Did you forget to signal async completion?
Here is my gulpfile.js code
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('public/stylesheets/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
gulp.task('watch', function() {
gulp.watch('public/stylesheets/*.scss', ['sass']);
});
gulp.task('default', gulp.series('sass', 'watch'));
gulp.task('sass', function() {
return gulp.src('public/stylesheets/style.scss') // return added here
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('public/stylesheets'));
});
// the return above will suffice to "signal async completion"
gulp.task('watch', function() {
// gulp.watch('public/stylesheets/*.scss', ['sass']); // old gulp v3 synatx
gulp.watch('public/stylesheets/*.scss', gulp.series('sass')); // v4 syntax
});
Also, you will want to switch to the plugin gulp-dart-sass instead of gulp-sass. It supports more recent features like #use for example.
Trying to use sass with browserSync, here's my gulp js.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var src = {
scss: 'app/scss/*.scss',
css: 'app/css',
html: 'app/*.html'
};
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', browserSync.reload);
});
// Compile sass into CSS
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass())
.pipe(gulp.dest(src.css));
/*.pipe(reload({stream: true}));*/
});
gulp.task('default', ['serve']);
I have to comment out this line .pipe(reload({stream: true})); then it will work. I've no clue what's wrong here.
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());
});
So I am trying to set up the livereload server, however, I never get the message Live reload server listening on: <port_number> like in this video. If I change my files, the console says that the file was reloaded. I have the Chrome extension installed. What am I missing? Thanks.
gulpfile.js
'use strict';
// include gulp
var gulp = require('gulp'),
gutil = require('gulp-util');
// include plug-ins
var autoprefix = require('gulp-autoprefixer'),
changed = require('gulp-changed'),
concat = require('gulp-concat'),
http = require('http'),
imagemin = require('gulp-imagemin'),
jshint = require('gulp-jshint'),
livereload = require('gulp-livereload'),
minifyCSS = require('gulp-minify-css'),
minifyHTML = require('gulp-minify-html'),
sass = require('gulp-sass'),
st = require('st'),
stripDebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify');
gulp.task('build-css', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/styles'));
});
// minify new or changed HTML pages
gulp.task('htmlpage', function() {
var htmlSrc = './src/*.html',
htmlDst = './dist';
return gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML())
.pipe(gulp.dest(htmlDst));
});
// minify new images
gulp.task('imagemin', function() {
var imgSrc = './src/images/**/*',
imgDst = './dist/images';
return gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
// JS hint task
gulp.task('jshint', function() {
return gulp.src('./src/scripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
return gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./dist/scripts/'));
});
gulp.task('server', function(done) {
http.createServer(
st({
path: __dirname + '/dist',
index: 'index.html',
cache: false
})
).listen(8080, done);
});
// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
return gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./dist/styles/'));
});
gulp.task('watch', ['server'], function() {
livereload.listen({
basePath: 'dist'
});
// watch for HTML changes
gulp.watch('./src/*.html', ['htmlpage']).on('change', livereload.changed);
// watch for JS changes
gulp.watch('./src/scripts/*.js', ['jshint', 'scripts']).on('change', livereload.changed);
// watch for CSS changes
gulp.watch('./src/styles/*.css', ['styles']).on('change', livereload.changed);
gulp.watch('src/scripts/**/*.js', ['jshint']).on('change', livereload.changed);
gulp.watch('src/styles/scss/**/*.scss', ['build-css']).on('change', livereload.changed);
});
// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'watch'], function() {
return gutil.log('Gulp is running!')
});
I use browser-sync to reload the browser when a file has changed.
Try something like this:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', function() {
gulp.watch("app/**/*.js").on('change', browserSync.reload);
gulp.watch("templates/**/*.html").on('change', browserSync.reload);
gulp.watch("css/**/*.css").on('change', browserSync.reload);
browserSync.init({
server: "./"
});
});
gulp.task('default', ['serve']);
I recommend your attention to the real-time browser page reload tool.
Live Reload Browser Page
Live Reload Browser Page
GitHub
Easy to use. Works independently of the IDE. But you need the IDE to be able to auto-save files. Also works with tools like Gulp, WebPack, Grunt and others.
I am new to gulp and I'm trying to get browser-sync working. It seems to work fine except that the syncronised scroll is not working. Can anyone see what might be wrong with my setup.
var gulp = require('gulp'),
jade = require('gulp-jade'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload'),
browserSync = require('browser-sync');
var outputDir = "builds/development";
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade())
.pipe(gulp.dest(outputDir))
.pipe(livereload());
});
// Js - to uglify use gulp js --type production ( or just leave out js to build everything )
gulp.task('js', function() {
return gulp.src('src/js/main.js')
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(gulp.dest(outputDir + '/js'))
.pipe(livereload());
});
// Sass - to compress use gulp sass --type production ( or just leave out sass to build everything )
gulp.task('sass', function() {
var config = {};
if ( gutil.env.type === 'production') {
config.outputStyle = 'compressed';
}
return gulp.src('src/sass/main.scss')
.pipe(sass(config))
.pipe(gulp.dest(outputDir + '/css'))
.pipe(livereload());
});
// Browser Sync ( not working 100% ... not scrolling )
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.watch('src/sass/**/*.scss', ['sass']);
});
gulp.task('default', ['jade', 'js', 'sass', 'watch', 'browser-sync'], function () {
gulp.watch("js/*.js", ['js', browserSync.reload]);
});
Your issue might be related to watching with both Gulp and BrowserSync. Here is a good reference to that:
"You shouldn't watch files with BrowserSync + Gulp" https://github.com/shakyShane/gulp-browser-sync/issues/16#issuecomment-43597240
So you would probably want remove livereload (let BrowserSync handle everything) and change your default Gulp task to something like this:
gulp.task('default', ['jade', 'js', 'sass', 'browser-sync'], function () {
gulp.watch('src/templates/**/*.jade', ['jade', browserSync.reload]);
gulp.watch('src/js/**/*.js', ['js', browserSync.reload]);
gulp.watch('src/sass/**/*.scss', ['sass', browserSync.reload]);
});
You could also try setting scroll explicitly (but it defaults to true anyway):
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
ghostMode: {
scroll: true
}
});
});
I had the same problem and that was because I had a javascript function called scrollTo declared in my own code, which was interfering with browserSync code. All I needed to do is to rename that function, and the browsersync scrolling was working again.