Firstly, I am aware there are a few questions on SO about this topic, but I've tried to use their task structure and their fixes, but nothing is working for me...
I'm just watching my Styles for now and I'll add Scripts and images on later.
Here is my gulpfile.js
:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var cssnano = require('gulp-cssnano');
var postcss = require('gulp-postcss');
var watch = require('gulp-watch');
var sourcemaps = require('gulp-sourcemaps');
var lost = require('lost');
var nodemon = require('gulp-nodemon');
var config = require('./config.js');
// Getting app name
var contract = config.contract;
// Directories
var dirs = {
stylesSrc: '_assets/' + contract + 'styles/scss/**/*.scss',
stylesDest: '_assets/' + contract + 'styles/css'
};
// Styles task with autoprefixer and lostgrid
gulp.task('styles', () => {
return gulp.src(dirs.stylesSrc)
.pipe(sass())
.pipe(postcss([
autoprefixer({
browsers: [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
]
}),
lost()
]))
.pipe(gulp.dest(dirs.stylesDest))
});
// Watch styles
gulp.task('watch', function(){
gulp.watch(dirs.stylesSrc, ['styles']);
})
// Nodemon server
gulp.task('serve', function(){
nodemon({'script': 'server.js'});
});
// Start server and watch for development
gulp.task('default', ['serve', 'watch']);
I've tried a few iterations, but this is the current one that seems to work, but not watch. Here is the Terminal output:
npm run start
gulp
Using gulpfile ~/Development/projectTitle/gulpfile.js
Starting 'serve'...
Finished 'serve' after 36 ms
Starting 'watch'...
Finished 'watch' after 9.64 ms
Starting 'default'...
Finished 'default' after 23 μs
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Server listening on port 8086
And nothing happens when I save a Sass file with changes.
Any advice would be welcome, thanks!
This was to do with path levels as Mark commented above. Need to watch for prefixed and trailing slashes in the URL paths.