I'm picking up an error with gulp on Windows 10
Running gulp through git bash works fine, it opens the current project in a new browser tab, but the moment I alter the style.scss file, and save it in atom, this error comes up...
[17:02:54] Starting 'css'...
events.js:183
throw er; // Unhandled 'error' event
^
BrowserslistError: Unknown browser query `> 1%`
at C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:164:11
at Array.reduce (<anonymous>)
at resolve (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:132:18)
at browserslist (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\browserslist\index.js:224:16)
at Browsers.parse (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\wamp64\www\wordpress\wp-content\themes\dev-project\node_modules\postcss\lib\lazy-result.js:192:32)
Solved it
Seen as though I am using Chrome, it was creating a conflict in /node_modules/browserlist/index.js
I edited %1 and took out firefox and added:
// Default browsers query
browserslist.defaults = [
'> 5%'
]
I then also had to change gulpfile to correspond with the following task:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('> 5%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
Here's the source if anyone encounters an issue like this
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!
When I run gulp, the 'styles' task starts running and sits forever, never finishing and not throwing any error. I have tried to uninstall and reinstall everything I can think of, and nothing seems to make a difference.
This is the function that is not finishing:
gulp.task('styles', function buildStyles() {
return gulp
.src(stylesGulpPaths)
// Copy scss files to build/scss for compass.
.pipe(gulp.dest('build/scss'))
// But only compile main.scss, which imports the rest.
.pipe(filter('**/main.scss'))
.pipe(compass({
css: 'build/css',
http_path: '/',
// image: 'build/images',
require: ['compass/import-once/activate', 'sass-globbing'],
sass: 'build/scss',
}))
.on('error', function (err) { console.error(err.message); })
// 'Concatenate' our one file so we write it to
// build/css/main.css
.pipe(concat('main.css'))
.pipe(gulpif(args.production, minifycss()))
.pipe(gulp.dest('build/css'));
});
var stylesGulpPaths = [
'app/**/*.scss',
'!app/vendor/**/*.scss',
];
Version:
gulp -v => 3.9.1
compass -v => 1.1.0.alpha.3 (Polaris)
node -v => 5.6.0
In my console it gets to the Starting 'styles'... line and just stays there forever.
I am pointing the correct ruby version (2.1.2).
Any thoughts are greatly appreciated.
Fixed it!
There were conflicting compass versions. I just had to uninstall compass, compass-rails, and sass-rails and reinstall compass.
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