I recognize that there are many similar questions, but none with a solution that I can find.
I am trying to compile Sass and JS but am getting the following error:
Error: spawn ENOTDIR
at exports._errnoException (util.js:746:11)
at ChildProcess.spawn (child_process.js:1162:11)
at exports.spawn (child_process.js:995:9)
... and so on...
It appears that the choke point is the return sass(...) statement. My gulpfile.js looks like this:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
source_sass = 'assets/sass/',
target_css = 'public/css/',
source_js = 'assets/js/',
target_js = 'public/js/';
gulp.task('css', function () {
return sass(source_sass + 'main.scss', {style: 'compressed'})
.pipe(autoprefix('last 10 version'))
.pipe(gulp.dest(target_css))
.pipe(notify('CSS processed.'));
});
gulp.task('js', function () {
return gulp.src(source_js + '**/*.js')
.pipe(gulp.dest(target_js))
.pipe(notify('JS processed.'));
});
gulp.task('watch', function () {
gulp.watch(source_sass + '**/*.scss', ['css']);
gulp.watch(source_js + '**/*.js', ['js']);
});
gulp.task('default', ['css', 'js', 'watch']);
OS X Yosemite 10.10.3
Ruby v2.0.0p481
Gem v2.0.14
Node v0.12.3
NPM v2.9.1
Gulp v3.8.11
I rolled back to Node v0.10.31 and all is well.
Related
I have bought template MaterialPro from wrappixel website. After I got the template package already, I have followed getting started installation from document attached with template as the following:
Install Node.js From https://nodejs.org/en/download/
Open terminal navigating to material-pro/
Install npm: npm install --global npm#latest
Install yarn: npm install --global yarn
Install gulp: npm install --global gulp-cli
Copy gulp: gulp copy
The gulpfile.js inside root template is like this:
//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
minifyCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');
const sassFiles = 'src/assets/scss/*.scss',
cssDest = 'dist/css/';
//compile scss into css
function style() {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
}
//This is for the minify css
async function minifycss() {
return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyCSS())
.pipe(gulp.dest(cssDest));
}
// This is for the minifyjs
async function minifyjs() {
return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js', '!dist/js/app.min.js'] )
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}
// Copy dependencies to ./public/libs/
async function copy() {
gulp.src(npmDist(), {
base: './node_modules'
})
.pipe(gulp.dest('./src/assets/libs'));
};
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style);
gulp.watch(['dist/css/style.css'], minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
gulp.task('default', watch);
exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;
After all, I made some changes to the template scss file, and run gulp command. At this point, the gulp command run never finished unitl now with output on terminal like this
Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms
What was going wrong with this? Please kindly help, thanks.
P.S: Pls apologized if my question is incomplete or something, if I will try to add some more detail if suggested.
Your gulp code is fine. Made some change on your scss or js file it will show some changes.
Exaplantion
Your default command is gulp.task('default', watch);
when you run gulp it starts to watch your scss, css, js code. If there is new change it will execute the command.
Suggestion. Use like this.
async function watch() {
gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}
I'm attempting to run the following Gulp task to compile Sass files, using the plugin, gulp-compass on OS X Yosemite 10.5.5.
var path = require("path");
var gulp = require("gulp");
var compass = require("gulp-compass");
gulp.task("compile2013Base", function() {
var projectPath = path.join(__dirname, '../../ ');
gulp.src(['../sass/desktop/css/2013/*.scss']).pipe(compass({
project: projectPath,
css: 'htdocs/assets/css/2013/',
sass: 'sass/desktop/css/2013'
})).on('error', errorHandler).pipe(gulp.dest('../../htdocs/assets/css/2013/'));
});
function errorHandler (error) {
console.log(error.toString());
this.emit('end');
}
However, when I try to run the task like gulp compile2013Base, I get the following error:
> gulp compile2013Base
[13:39:06] Using gulpfile [**redacted**]/scripts/js/gulpfile.js
[13:39:06] Starting 'compile2013Base'...
[13:39:06] Finished 'compile2013Base' after 9.07 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn /usr/bin/compass ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
I already have compass installed at /usr/bin/compass, and running compass in the terminal does not show any errors.
I'm not sure what to go on here, how do I get the error details?
This is helped me
sudo gem install -n /usr/local/bin compass
see Error: "compass:dist" Fatal error: spawn /usr/bin/compass ENOENT
Anyone know how to have a sound ( like grunt ) when gulp throw a error during compile/watch ?
l need to setup something special for gulp for have this feature ?
UPDATE: It should be noted that gulp-util has been deprecated and should not be used.
There is the ubituious gulp-util plugin. One of the features that it provides is the "gutil.beep();" function.
in your project's root execute:
npm install gulp-util --save-dev
then in your Gulpfile.js:
var gutil = require('gulp-util');
gutil.beep();
You can work with gulp-plumber which is excellent for handling errors in gulp streams. Setup the errorHandler method which will call the beeper() method provided by the NPM library - beeper
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var beeper = require('beeper'); //https://www.npmjs.com/package/beeper
gulp.task('compile-sass', function () {
return gulp.src('blob/for/files.scss')
.pipe(plumber(errorHandler))
.pipe(sass())
.pipe(gulp.dest('dest/'));
});
function errorHandler(error) {
// 3 beeps for error
beeper(3); // https://www.npmjs.com/package/beeper
return true;
}
Now, whenever there is an error in compiling sass, you will get 3 beeps to notify you that there was an error.
Good Luck.
npm install -g gulp-crash-sound
Source: https://www.npmjs.com/package/gulp-crash-sound
I'm using gulp-sass and I get the following errors:
ESL#eslmbp /Applications/MAMP/htdocs/craigpomranz[master*]$ gulp sass
[17:54:53] Using gulpfile /Applications/MAMP/htdocs/craigpomranz/gulpfile.js
[17:54:53] Starting 'sass'...
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error in plugin 'gulp-sass'
/Applications/MAMP/htdocs/craigpomranz/wp-content/themes/craig/scss/partials/base:13: error: error reading values after 'xsmall'
at opts.error (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/index.js:67:17)
at onError (/Applications/MAMP/htdocs/craigpomranz/node_modules/gulp-sass/node_modules/node-sass/sass.js:73:16)
Here's my gulpfile.js:
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
//var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minify = require('gulp-minify-css');
var browserSync = require('browser-sync');
var rename = require('gulp-rename');
var theme_path = 'wp-content/themes/craig/';
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src(theme_path+'scss/main.scss')
.pipe(sass())
// .pipe(minify({keepBreaks:true}))
.pipe(minify())
//.pipe(rename('style.css'))
.pipe(gulp.dest(theme_path));
});
The same scss (files) compile fine with: sass --watch path/to/main.scss --compressed
I tried with another plugin (gulp-ruby-sass) and it threw a different error.
What am I doing wrong?
Update The error message mentions line 13 in _base.scss. Here is the contents of that file:
//Setting breakpoints
$xsmall : 400px;
$small : 768px; //phones
$medium : 1024px; //tablets
$breakpoints: (
'xsmall' :'(max-width: #{$xsmall})', //<--HERE IS LINE 13
'small': '(max-width: #{$small})',
// 'small': '(min-width: #{$xsmall+1}) and (max-width: #{$small})',
'medium': '(min-width: #{$small+1}) and (max-width: #{$medium})',
'large': '(min-width: #{$medium + 1})'
);
gulp-sass doesn't support maps, try using your commented out gulp-ruby-sass.
What will be supported is lists:
$breakpoint-keys: (
'key_a',
'key_b',
'key_c'
);
$breakpoint-values: (
'value_a',
'value_b',
'value_c'
);
But as you'll see, these are one-dimensional. However maps (new in SASS 3.3.0, 7 March 2014) will allow you to use keys which will let you use the syntax you are currently using:
$breakpoints: (
'key_a' : 'value_a',
'key_b' : 'value_b',
'key_c' : 'value_c'
);
For more information about lists and maps, refer to this article: http://viget.com/extend/sass-maps-are-awesome
I'm having some difficulty with a Grunt task I'm authoring. I'm trying to execute npm install, followed by bower install, followed by a grunt hub target (to trigger a build command for multiple sub-projects).
The problem I'm encountering lies with child_process. I get spawn ENOENT error if I run the following commands in my grunt task, with the npm install spawn command that's currently commented out:
var path = require('path'),
projectPath = path.resolve(process.cwd(), this.data.activity );
grunt.log.debug('project path computed as: ', projectPath);
process.chdir( projectPath );
console.log('current dir is: ', process.cwd());
console.log('EVN is: ', process.env);
var spawnProcess = spawn('ls');
// var spawnProcess = spawn('npm install');
spawnProcess.stdout.on('data', function (data) {
console.log('' + data);
});
spawnProcess.stderr.on('data', function(data) {
console.log('something went wrong installing deps for ' + path + '. Error: ', data);
});
spawnProcess.on('close', function (exitCode) {
console.log( 'ls has finished with Exit Code: ' + exitCode);
});
the current code (with ls instead of npm install) results in:
running "install:projects" (install) task[D] Task source: /Users/zedd45/proj/Gruntfile.js
Verifying property install.projects exists in config...OK
File: [no files]
[D] project path computed as: /Users/zedd45/proj/activity/web/client
current dir is: /Users/zedd45/proj/activity/web/client
EVN (abbreviated) is: {
TERM_PROGRAM: 'iTerm.app',
SHELL: '/bin/bash',
PWD: '/Users/zedd45/proj',
...
OLDPWD: '/Users/zedd45/proj/activity/web/client',
_: '/usr/local/bin/grunt' }
GruntFile.js
bower.json
package.json
this_is_the_directory_you_are_looking_for.txt
ls has finished with Exit Code: 0
but if I change 'ls' to 'npm install' I get instead
``Fatal error: spawn ENOENT
immediately following the ENV print.
I have tried chmod 777 for that directory, which doesn't seem to help.
I have also tried:
// var spawnProcess = spawn('npm install', {'cwd': projectPath});
and
// var spawnProcess = spawn('npm install', [], {'cwd': projectPath});
The former results in
Warning: Object # has no method 'slice' Use --force to
continue.
the later still results in the ENOENT error.
Any help with exactly what this ENOENT error is would probably help a great deal; I haven't had much success with Googling it nor with the child process API docs
Double check the docs on child_process.spawn again. The first argument should be only the command to run and the second is the arguments:
var npm = spawn('npm', ['install'], { cwd: projectPath });