We Keep Coding

Gulp sass watch create new css folder

Ihave 2 problems with gulp sass watch
1- when i save my sass file gulp create extra css folder and i already have one
2- gulp watch is only watching for my style.scss and not the other files inside the other folders
My project structure
assets
css
style.css
sass
1-basics
_base.scss
_colors.scss
2-layout
_grid.scss
_header.scss
style.scss
index.html
gulp
const gulp = require('gulp');
const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src('assets/sass/**/*style.scss')
.pipe(sass())
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("assets/sass/**/*style.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});

I modified a few parts of your code, see the comments:
const gulp = require('gulp');
// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
// const watch = require('gulp-watch');
const sass = require('gulp-sass');
const bs = require('browser-sync').create();
gulp.task('browser-sync', ['sass'], function() {
bs.init({
server: {
baseDir: "./"
}
});
// note I moved the watch tasks to within the browser-sync task
// and changed the sass watch glob below
// so it watches both the partials and style.scss
gulp.watch("assets/sass/**/*.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
gulp.task('sass', function () {
// this appears to be the correct path to your style.scss file
return gulp.src('assets/style.scss')
.pipe(sass())
// with the change to the gulp.src above, now the gulp.dest is correct
// before you had a globstar ** and that effects the base directory
// that will be used below. Without the globstar it is a little easier
.pipe(gulp.dest('./assets/css'))
.pipe(bs.reload({stream: true}));
});
// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));
// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
//gulp.watch("assets/sass/**/*style.scss", ['sass']);
//gulp.watch("*.html").on('change', bs.reload);
//});

Browser-sync not reloading after SASS compiling

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());
});

GULP watch not working in my gulp.js file

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']);

gulpfile.js - task is not in gulp file error

Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}

You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).

Gulp livereload not working in Chrome

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.