I have following directory structure:
web/
index.html
js/
vendor/
xxxx/
x1.js
x2.js
x3.js
...
view/
v1.js
v2.js
I want to use gulp-clean to delete all files under www folder except index.html.
But I got the
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, stat '/Users/xxxx/yyy.js'
Here's the gulp task:
gulp.task('test2', function () {
'use strict';
gulp.src(['web/**', '!web/index.html'], {
read: false
})
.pipe(clean({
force: true
}));
});
What I'm doing wrong here?
I ran into the same issue with gulp-clean. Have you tried del instead? It seems to work as expected.
Try this instead:
gulp.task('test2', function () {
'use strict';
gulp.src(['!web/index.html', 'web/**'], {
read: false
})
.pipe(clean({
force: true
}));
});
Write your exceptions first ;)
Related
I am trying to import theme.json file into scss file and also mapped all the json values in my scss file with the map-get methodology.
Below is the code I am trying to compile to css:
gulp.task('sass', function() {
console.log(util.env.type);
var epub = gulp.src(['app/epubsource/themes/default/main.scss'])
.pipe(compass({
config_file: 'node_modules/gulp-compass/test/config.rb',
sourcemap: true,
css: 'app/epubsource/themes/default',
sass: 'app/epubsource/themes/default'
}))
.pipe(gulp.dest('app/epubsource/themes/default/'))
.pipe(reload({
stream: true
}));
return mergeStream(epub);
});
Below is the code for importing json in main.scss file:
#import "theme.json";
BTW, both main.scss and theme.json are on the same folder level.
Below is the error I am getting:
LoadError on line ["54"] of C: cannot load such file -- sass-globbing
Run with --trace to see the full backtrace
events.js:141
throw er; // Unhandled 'error' event
^
Error: Compass failed
Please help me to get out from this issue.
Uninstalled all the sass and compass dependencies and re-installed.
Now in node_modules>test>config.rb, add a dependency 'sass-json-vars' like sass-globbing.
Now, try to compile. That works like a charm!
I am trying to use gulp-sass to compile my scss files, but for some reason it is failing but not displaying an error message.
This is the command output for gulp styles:
[20:40:04] Requiring external module babel-core/register
[20:40:05] Using gulpfile ~\Documents\Development\Web Applications\webux\webux2\gulpfile.babel.js
[20:40:05] Starting 'styles'...
Here is my gulp task:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', err => {
$.util.log(err);
}))
.pipe(gulp.dest('./tmp/styles'));
});
I get the same output when using $.sass.logError as the error callback.
I try to use babel with gulp. But I faced error that can't resolve.
My gulp task looks like
`
var gulp = require('gulp'),
concat = require('gulp-concat'),
babel = require("gulp-babel");
gulp.task('default', function() {
gulp.src(cssSrc)
.pipe(concat('main.css'))
.pipe(gulp.dest('build'));
gulp.src(jsSrc)
.pipe(babel())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
gulp.watch(cssSrc,['css-task']);
gulp.watch(jsSrc,['js-task']);
});
`
jsSrc - array of pathes to js files
.babelrc looks so
{
"presets": ["es2015"]
}
When I run gulp I see this error
events.js:141
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] C:\workspace\projects\test\test-client\app.js: Unknown option: C:\workspace\projects\test\test-client\.babelrc.presets
at Logger.error (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at DestroyableTransform._transform (C:\workspace\projects\test\test-client\node_modules\gulp-babel\index.js:30:20)
at DestroyableTransform.Transform._read (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:10)
app.js- the first file in jsSrc array
What could be wrong ?
I had the same issue as you described.
In my case, the solution was in addition to updating module babel-cli also to update module gulp-babel to the latest version with npm install gulp-babel --save-dev, as they updated the core library to 6.0.*.
Hope that helps!
The part of gulpfile is
gulp.task('serve',['sass'], function() {
browserSync.init({
proxy: "dev.cz/project"
});
gulp.watch(paths.styles.src + '**/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
it gives me error
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn EACCES
at errnoException (child_process.js:1000:11)
at Process.ChildProcess._handle.onexit (child_process.js:791:34)
The project is on out local server, I am connected to server via ssh. Everything works fine, until I take broswerync to the party. Any idea ??
This is probably an error because BrowserSync don't have permission to open a browser page for some reason.
adding the property open: false will solve this
I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});