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
Related
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'...
I started creating my own working enviroment for my personal website using gulp.js until I stumbled across an error I can't seem to solve.
Here is my my code:
(Note that I am pretty sure the error is in my 'sassCompile' task)
/**
* Initialize all gulp plugins
*/
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').create();
var autoPrefixer = require('autoprefixer');
var plumber = require('gulp-plumber');
var sourceMaps = require('gulp-sourcemaps');
/**
* Launch browsersync
*/
gulp.task('sync', ['sassCompile', 'pugCompile'], function(){
browserSync.init({
server: {
baseDir: './'
}
});
});
/**
* Compile sass and css files into css so the browser can read them.
*/
gulp.task('sassCompile', function() {
gulp.src('src/sass/*.scss')
.pipe(plumber())
.pipe(sourceMaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.on('error', console.error.bind(console))
.pipe(autoPrefixer('last 2 versions', {cascade: true}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.reload({stream: true}));
});
/**
* Compile pug files into html so the browser can read them.
*/
gulp.task('pugCompile', function() {
gulp.src('src/pugfiles/*.pug')
.pipe(plumber())
.pipe(pug())
.pipe(gulp.dest('./HTML'))
});
This will result in this error:
TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\Users\lucas\Desktop\Portfolio\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:564:8)
at DestroyableTransform.pipe2 (C:\Users\lucas\Desktop\Portfolio\node_modules\gulp-plumber\index.js:72:14)
at Gulp.<anonymous> (C:\Users\lucas\Desktop\Portfolio\gulpfile.js:37:7)
at module.exports (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:134:8)
at C:\Users\lucas\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:132:7)
at process._tickCallback (internal/process/next_tick.js:181:9)
My directory:
Directory
If any other info is necessary I'll make sure to give it.
I think this is because autoprefixer does not return a stream.
Try using gulp-autoprefixer instead:
var autoprefixer = require('gulp-autoprefixer');
...and pass it an object for the options:
// ...
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: true
}))
https://www.npmjs.com/package/gulp-autoprefixer
$ gulp build
[02:36:37] Using gulpfile C:\xampp\htdocs\melodic\gulpfile.js
[02:36:37] Starting 'build'...
[02:36:37] Starting 'clean:dist'...
[02:36:37] Finished 'clean:dist' after 4.63 ms
[02:36:37] Starting 'sass'...
[02:36:37] Starting 'useref'...
[02:36:37] Starting 'img'...
[02:36:37] Starting 'cleancss'...
[02:36:37] Finished 'cleancss' after 37 ms
C:\xampp\htdocs\melodic\node_modules\gulp-useref\node_modules\vinyl-
fs\lib\src\index.js:20
throw new Error('Invalid glob argument: ' + glob);
^
Error: Invalid glob argument:
at Object.src (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\vinyl-fs\lib\src\index.js:20:11)
at DestroyableTransform.addAssetsToStream
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:62:15)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:124:31
at Array.forEach (native)
at DestroyableTransform.processAssets
(C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:115:11)
at C:\xampp\htdocs\melodic\node_modules\gulp-useref\index.js:178:31
at Stream.<anonymous> (C:\xampp\htdocs\melodic\node_modules\gulp-
useref\node_modules\event-stream\index.js:318:20)
at _end (C:\xampp\htdocs\melodic\node_modules\through\index.js:65:9)
at Stream.stream.end
(C:\xampp\htdocs\melodic\node_modules\through\index.js:74:5)
at DestroyableTransform.onend
(C:\xampp\htdocs\melodic\node_modules\through2\node_modules\readable-
stream\lib\_stream_readable.js:577:10)
I have tried to remove the running tasks one by one but to no avail. What throws me off also is the fact that it seems to run through all the tasks and even finishing them and then crashing as the last task is finished. Thanks in advance.
EDIT: Here is my gulpfile as I forgot to include it.
var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
//Requires browser synch
var browserSync = require('browser-sync').create();
//Requires userref
var useref = require('gulp-useref');
//Requires uglify
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
//Requires cssnano
var cssnano = require('gulp-cssnano');
//Requires imagemin
var imagemin = require('gulp-imagemin');
//Requires cache
var cache = require('gulp-cache');
//Requires del
var del = require('del');
//Requires run-sequence
var runSequence = require('run-sequence');
//requires postcss
var postcss = require('gulp-postcss');
//ACTIVE COMMANDS
/*Run 'gulp browserSync' in commandline.
This task automatically reloads the broswer upon each save of document*/
gulp.task('browserSync', function() {
browserSync.init({
injectChanges: true,
server: {
baseDir: "./app"
},
})
});
/*Run 'gulp sass' in command line.
THIS TASK GETS ALL SCSS IMPORTED INTO THE app.scss FILE AND CONVERTS IT INTO app.css.
THIS TASK IS A ONE TIME CONVERSTION*/
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.stream({match: '**/*.css'}));
});
/*Run 'gulp watch' in command line.
THIS TASK GETS ALL SCSS AND OTHER FILE TYPES AND CONVERTS THEM ACITVELY.
THIS TASK IS ONGOING*/
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
//PRODUCTION/FINAL COMMANDS
/*Run 'gulp useref' in command line.
THIS TASK GETS ALL CSS AND OTHER FILE TYPES AND JOINS DIFFERENT FILES AND MINIMIZES THEM IN THE DIST FOLDER.
*/
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
gulp.task('cleancss', function () {
return gulp.src('./src/*.css')
.pipe(postcss())
.pipe(gulp.dest('./dest'));
});
/*Run 'gulp img' in command line.
MINIMIZSES PHOTOS TO THE DIST FOLDER*/
gulp.task('img', function(){
return gulp.src('app/img/**/*.+(png|jpg|gif|svg)')
.pipe(imagemin({
// Setting interlaced to true
interlaced: true
}))
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('dist/img'))
});
/*Run 'gulp fonts' in command line.
CLEANS THE DIST DIRECTORY FOR UNUSED FILES*/
gulp.task('clean:dist', function() {
return del.sync('dist');
});
/*Run 'gulp fonts' in command line.
CLEANS THE IMAGE CACHE CREATED EARLIER*/
gulp.task('cache:clear', function (callback) {
return cache.clearAll(callback)
});
gulp.task('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'img', 'cleancss'],
callback
)
});
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
});
EDIT: Included my gulpfile for further details.
I am trying to move all the font-awesome fonts from the bower_components folder to my build directory, but the task isn't copying any files.
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify');
var config = {
bowerDir: 'bower_components'
}
gulp.task('fa', function() {
return
gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
.pipe(gulp.dest('assets/fonts/font-awesome/'));
});
When I run gulp fa it runs fine, but no files appear in my assets/fonts/font-awesome directory.
I know the .pipe(gulp.dest()) function works because I have a scripts function like so:
gulp.task('scripts', function(){
return gulp.src([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/jquery-validation/dist/jquery.validate.js',
'bower_components/foundation/js/foundation.min.js',
'assets/js/custom/app.js',
])
.pipe(concat('app.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets/js/'))
.pipe(notify({
message: 'Scripts minified'
}));
});
Any ideas?
EDIT
My folder structure is like this:
assets/
--fonts/
----font-awesome/
gulpfile.js
bower_components/
--font-awesome/
----fonts/
------fontawesome-webfont.eot
------fontawesome-webfont.svg
------fontawesome-webfont.ttf
------fontawesome-webfont.woff
------fontawesome-webfont.woff2
I want to suggest to use gulp-copy
var copy = require('gulp-copy');
gulp.task('copy', function() {
gulp.src(['bower_components/font-awesome/fonts/*.*'])
.pipe(copy('assets/fonts/font-awesome/', { prefix: 3}));
});
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.