I'm having trouble getting gulp watch to work. When I run it, it successfully outputs CSS to the /css folder, but then it gets hung up, not progressing past the "sass" step. Is there something wrong with my gulpfile?
gulpfile.js
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
gulpIf = require('gulp-if'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function(){
livereload.listen();
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
gulp.watch(['./css/style.css', './**/*.html.twig', './js/*.js'], function (files){
livereload.changed(files)
});
});
Terminal output:
[13:53:47] Using gulpfile ~/Documents/Jurassic/project/drupal/web/themes/custom/nekken/gulpfile.js
[13:53:47] Starting 'watch'...
[13:53:54] Starting 'sass'...
Related
In my gulpfile.js I have this:
// Sass configuration
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber');
autoprefixer = require('autoprefixer');
postcss = require('gulp-postcss');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function() {
gulp.src([
'kraater-web/src/app/css/admin/vars.scss',
'kraater-web/src/app/css/admin/*.scss'])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('admin.scss'))
.pipe(gulp.dest('kraater-web/src/app/css/'))
.pipe(sass())
.pipe(postcss([ autoprefixer() ]))
.pipe(cleanCSS())
.pipe(concat('admin.css'))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('kraater-web/src/app/css/'))
});
gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
})
I compile all my .scss files into one big admin.css (it isn't even that big though) with mapping, but at one point, when I enter extra parameters to scss the gulp file fails and gives me this error:
C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289
throw new Error('Invalid mapping: ' + JSON.stringify({
^
Error: Invalid mapping: {"generated":{"line":186,"column":9},"source":"admin.scss","original":{"line":381,"column":-6},"name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:289:13)
at SourceMapGenerator_addMapping [as addMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:101:12)
at C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:72:17
at Array.forEach (native)
at SourceMapConsumer_eachMapping [as eachMapping] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-consumer.js:155:14)
at Function.SourceMapGenerator_fromSourceMap [as fromSourceMap] (C:\wamp\www\site17\node_modules\source-map\lib\source-map-generator.js:48:24)
at applySourceMap (C:\wamp\www\site17\node_modules\vinyl-sourcemaps-apply\index.js:26:40)
at filePush (C:\wamp\www\site17\node_modules\gulp-sass\index.js:105:9)
at Object.callback (C:\wamp\www\site17\node_modules\gulp-sass\index.js:147:9)
at options.success (C:\wamp\www\site17\node_modules\node-sass\lib\index.js:308:32)
Watching build tasks has finished.
The new parameters I enter into scss are valid, because if I delete some lines before it, then gulp compiles nicely again. It's as if scss maps memory gets full or something and fails to compile.
Anybody seen something like this before?
Handling large files: pass the option largeFile: true to sourcemaps.init().
Check out on NPM.
// Sass configuration
var gulp = require('gulp'),
sass = require('gulp-sass'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
plumber = require('gulp-plumber');
autoprefixer = require('autoprefixer');
postcss = require('gulp-postcss');
function handleError(err) {
console.log(err.toString());
this.emit('end');
}
gulp.task('sass', function() {
gulp.src([
'kraater-web/src/app/css/admin/vars.scss',
'kraater-web/src/app/css/admin/*.scss'])
.pipe(plumber())
.pipe(sourcemaps.init({largeFile: true}))
.pipe(concat('admin.scss'))
.pipe(gulp.dest('kraater-web/src/app/css/'))
.pipe(sass())
.pipe(postcss([ autoprefixer() ]))
.pipe(cleanCSS())
.pipe(concat('admin.css'))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('kraater-web/src/app/css/'))
});
gulp.task('default', ['sass'], function() {
gulp.watch('kraater-web/src/app/css/admin/*.scss', ['sass']).on('error', handleError);
Got it fixed by rolling back the gulp-sass to older version. I simply ran.
npm install gulp-sass#2.3.2
In cmd and it started to compile again.
Original poster of this fix was user araphiel, from in this thread:
https://github.com/nodejs/help/issues/429
Have been unable to get Browsersync working in Gulp.
I have installed the standard JointsWP build (this is a wordpress/foundation mash up), but the following gulpfile doesn't kick off browsersync at all.
I am using MAMP and the site works fine.
Tried a few things but limited gulpfile knowledge.
thanks in advance.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
babel = require('gulp-babel'),
browserSync = require('browser-sync').create();
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./assets/css/'))
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('.')) // Creates sourcemaps for minified
styles
.pipe(gulp.dest('./assets/css/'))
});
// JSHint, concat, and minify JavaScript
gulp.task('site-js', function() {
return gulp.src([
// Grab your custom scripts
'./assets/js/scripts/*.js'
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest('./assets/js'))
});
// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
return gulp.src([
// Foundation core - needed if you want to use any of the
components below
'./vendor/foundation-sites/js/foundation.core.js',
'./vendor/foundation-sites/js/foundation.util.*.js',
// Pick the components you need in your project
'./vendor/foundation-sites/js/foundation.abide.js',
'./vendor/foundation-sites/js/foundation.accordion.js',
'./vendor/foundation-sites/js/foundation.accordionMenu.js',
'./vendor/foundation-sites/js/foundation.drilldown.js',
'./vendor/foundation-sites/js/foundation.dropdown.js',
'./vendor/foundation-sites/js/foundation.dropdownMenu.js',
'./vendor/foundation-sites/js/foundation.equalizer.js',
'./vendor/foundation-sites/js/foundation.interchange.js',
'./vendor/foundation-sites/js/foundation.magellan.js',
'./vendor/foundation-sites/js/foundation.offcanvas.js',
'./vendor/foundation-sites/js/foundation.orbit.js',
'./vendor/foundation-sites/js/foundation.responsiveMenu.js',
'./vendor/foundation-sites/js/foundation.responsiveToggle.js',
'./vendor/foundation-sites/js/foundation.reveal.js',
'./vendor/foundation-sites/js/foundation.slider.js',
'./vendor/foundation-sites/js/foundation.sticky.js',
'./vendor/foundation-sites/js/foundation.tabs.js',
'./vendor/foundation-sites/js/foundation.toggler.js',
'./vendor/foundation-sites/js/foundation.tooltip.js',
])
.pipe(babel({
presets: ['es2015'],
compact: true
}))
.pipe(sourcemaps.init())
.pipe(concat('foundation.js'))
.pipe(gulp.dest('./assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(sourcemaps.write('.')) // Creates sourcemap for minified
Foundation JS
.pipe(gulp.dest('./assets/js'))
});
// Update Foundation with Bower and save to /vendor
gulp.task('bower', function() {
return bower({ cmd: 'update'})
.pipe(gulp.dest('vendor/'))
});
// Browser-Sync watch files and inject changes
gulp.task('browsersync', function() {
// Watch files
var files = [
'./assets/css/*.css',
'./assets/js/*.js',
'**/*.php',
'assets/images/**/*.{png,jpg,gif,svg,webp}',
];
browserSync.init(files, {
// Replace with URL of your local site
proxy: "s18.dev",
});
gulp.watch('./assets/scss/**/*.scss', ['styles']);
gulp.watch('./assets/js/scripts/*.js', ['site-js']).on('change',
browserSync.reload);
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('./assets/scss/**/*.scss', ['styles']);
// Watch site-js files
gulp.watch('./assets/js/scripts/*.js', ['site-js']);
// Watch foundation-js files
gulp.watch('./vendor/foundation-sites/js/*.js', ['foundation-js']);
});
// Run styles, site-js and foundation-js
gulp.task('default', function() {
gulp.start('styles', 'site-js', 'foundation-js');
});
It was in fact my lack of gulp knowledge....
On closer inspection of the gulpfile, there were 2 functions - one with BS and one without...
I was running 'gulp watch' with no joy, whereas simply running 'gulp browsersync' did the trick.
bonza.
I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.
gulp css works, gulp watch doesn't work.
Yet everything looks good.
Do you have an idea ?
Thanks !
// Requires
var gulp = require('gulp');
// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
return gulp.src('./src/assets/css/style.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(rename('knacss.css'))
.pipe(gulp.dest('./dist/assets/css/'))
.pipe(rename('style.css'))
//.pipe(sourcemaps.init())
.pipe(minifycss())
//.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./dist/assets/css/'));
});
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['css']);
});
gulp.task('default', ['css']);
Gulp watch doesn't not compile my .scss at each modification
That's because you don't tell it to.
You are only watching *.scss files in ./src/assets/css, not in subfolders.
To include subfolders, use this syntax:
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});
try with something like.
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
};
gulp.src(sassPath.cssSrc)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
and then in your watch:
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});
and:
gulp.task('default', ['sass','css']);
I have a pretty simple and straightforward gulpfile for sass compilation, concat, minification and browser reload on changes using a watch task that observes for *.php, *.js and *.sass.
require('es6-promise').polyfill();
var gulp = require('gulp'),
sass = require('gulp-sass');
var concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
livereload = require('gulp-livereload');
var config = {
scripts: [
'./bower_components/jquery/dist/jquery.min.js',
'./bower_components/materialize/dist/js/materialize.js',
'./js/**/*.js'
]
};
gulp.task('sass', function() {
return gulp.src('./sass/style.scss')
.pipe(sass.sync({
includePaths: ['./bower_components/materialize/sass'],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(livereload())
.pipe(gulp.dest('./'));
});
gulp.task('scripts', function() {
return gulp.src(config.scripts)
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./js/'))
.pipe(uglify())
.pipe(rename({
extname: '.min.js'
}))
.pipe(livereload())
.pipe(gulp.dest('./js/'));
});
gulp.task('copyassets', function(){
})
// default task
gulp.task('default', ['sass', 'scripts']);
gulp.task('watch', function () {
livereload.listen(35729);
gulp.watch('**/*.php').on('change', function(file) {
livereload.changed(file.path);
});
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('./js/**/*.js', ['scripts']);
});
I execute the default task with gulp, and it was working fine for me until a few hours ago. All of a sudden, I have started getting FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory on SASS changes.
I have tried allocating it more space with '--max-old-space-size=8192', but to no use.
I have reverted all recent changes too in my code base, but that did not seem to fix it too.
Any help or pointers will be appreciated.
I am using this in combination with a _s WP theme.
I'm trying to setup a Gulp task that converts Sass into CSS and then minifies it.
Here's my current gulpfile.js
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass','minify-css']);
});
I run gulp sass:watch and I expect it to convert main.scss into main.css which it does and then I see that it also runs minify-css, but it doesn't actually minify it.
If I run gulp minify-css, it works perfectly. Can someone please tell me how this needs to be adjusted so gulp.watch runs both tasks, one after another?
Thank you
Looks like I got this work, by removing the additional task and combining the css minify into the sass portion.
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css'));
});
// gulp.task('minify-css', function() {
// return gulp.src('css/*.css')
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(gulp.dest('css'));
// });
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass']);
});