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!
Related
I'm trying to set up es6 transpilation from gulp.
I'm setting up a completely minimal test just to get babel working with gulp.
I installed the modules like this:
npm install --save-dev gulp gulp-cli gulp-babel#next #babel/core #babel/preset-env
I have this gulpfile:
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
This setup is slightly adapted from the babel documentation:
https://babeljs.io/setup#installation
When I run 'gulp', I get this output:
[20:16:25] Using gulpfile ~/play/react/babeltest/gulpfile.js
[20:16:25] Starting 'default'...
[20:16:25] 'default' errored after 23 ms
[20:16:25] Error in plugin "gulp-babel"
Message:
Cannot find module 'babel-preset-env' from '/home/bobdobbs/play/babeltest'
How do I get this working?
Trying to run eslint with gulp and getting this error. What have I missed? Here's my gulpfile.bable.js file.
import gulp from 'gulp';
import eslint from 'eslint';
const jsFiles = ['*.js', 'src/**/*.js'];
gulp.task('lint', () => {
gulp.src(jsFiles)
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
Here's the full error:
C:\Users\promer\projects\library>gulp lint
[14:50:35] Requiring external module babel-register
[14:50:35] Using gulpfile ~\projects\library\gulpfile.babel.js
[14:50:35] Starting 'lint'...
[14:50:35] 'lint' errored after 10 ms
[14:50:35] TypeError: (0 , _eslint2.default) is not a function
at Gulp.<anonymous> (C:/Users/promer/projects/library/gulpfile.babel.js:8:11)
at module.exports (C:\Users\promer\projects\library\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:134:8)
at C:\Users\promer\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
It was a simple mistake. I almost deleted the question, but I figured someone else might make the same mistake I did. While I have gulp-eslint installed I was actually loading regular eslint into my gulp file. The fix is to change this line
import eslint from 'eslint'
to
import eslint from 'gulp-eslint'
I'm using "gulp-bower" to auto install all the libs from bower.json, I also want gulp to minify all libs once it's been download. This is my code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest("./bower_components"))
});
gulp.task('minifyBower', function() {
return gulp.src(mainBowerFiles())
.pipe(concat('lib.js'))
.pipe(gulp.dest('dist'))
});
gulp.task('default', ['bower','minifyBower']);
If I run this I got this error.
Starting 'bower'...
[11:23:06] Using cwd: /Users/yizhou/Documents/Yi
[11:23:06] Using bower dir: ./bower_components
[11:23:06] Starting 'minifyBower'...
[11:23:06] 'minifyBower' errored after 1.53 ms
[11:23:06] Error: Bower components directory does not exist at /Users/yizhou/Documents/Yi/bower_components
at Error (native)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/main-bower-files/lib/index.js:76:71)
at Gulp.<anonymous> (/Users/yizhou/Documents/Yi/gulpfile.js:16:21)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
[11:23:06] bower cached git://github.com/jquery/jquery.git#2.1.4
[11:23:06] bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
[11:23:07] bower install jquery#2.1.4
[11:23:08] Finished 'bower' after 2 s
gulp runs every task asynchronously by default, to improve performance. If you want to run in sequence, you need to explicit declare dependencies:
gulp.task('minifyBower', ['bower'], function() { /* ... */ });
Now minifyBower won't run until bower is run. If you need more complex stuff, you should use something like run-sequence.
I have a gulp script, and when I run it from command line, it does not return to shell.
this is a simple gulp command to delete files from dist directory
'use strict';
var del = require('del');
var gulp = require('gulp');
gulp.task('clean', function (cb) {
return del(['dist/**/*'], cb);
});
run command:
gulp clean
[13:39:10] Using gulpfile gulpfile.js
[13:39:10] Starting 'clean'...
[13:39:11] Finished 'clean' after 6.35 ms
npm WARN package.json abc#0.0.0 No description
npm WARN package.json abc#0.0.0 No repository field.
npm WARN package.json abc#0.0.0 No README data
npm WARN package.json karma-coverage#0.2.7 No README data
npm WARN package.json karma-phantomjs-launcher#0.1.4 No README data
it does not return to shell, I have to do CTRL+C to return back to shell.
I am new to gulp, please let me know what I did wrong, thanks.
Try removing the callback argument.
gulp.task('clean', function () {
return del(['dist/**/*']);
});
in the gulp trying to perform html minification in the build
Code:
gulp.task('html',function(){
return gulp.src('app/**/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate And Minify Styles
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('styles/main.css'))
// Minify Any HTML Output Files
.pipe(gulp.dest'dist'))
.pipe($.size({title: 'html'}));
});
Error:
TypeError: Uncaught, unspecified "error" event.
at TypeError (<anonymous>)
at Transform.emit (events.js:74:15)
at Transform.onerror (node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:558:12)
at Transform.emit (events.js:95:17)
at Transform.<anonymous> (index.js:80:42)
at Array.forEach (native)
at Transform.<anonymous> (index.js:68:35)
at Array.for Each (native)
at Transform.<anonymous> (index.js:46:36)
at Array.forEach (native)
has anyone came across this issue , please suggest how to fix this
Thanks
Sundar
upgrade gulp-useref:
npm remove gulp-useref && npm i gulp-useref --save-dev