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?
Related
I have installed:
$ npm install protractor-jasmine2-html-reporter --save-dev
for reporter
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
exports.config = {
// ...
onPrepare: function() {
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: 'target/screenshots'
})
);
}
}
and defined the path where the reporter is installed
var Jasmine2HtmlReporter =
require('../../build/node_modules/protractor-jasmine2-html-reporter');
Now i get this Error:
configParser - ReferenceError: jasmine is not defined
How should i define jasmine?
For info: i have a test execution task defined in a gulp file and i run the task using webstorm.
I have seen ReferenceError: jasmine is not defined in other reporters(jasmine-repoters) when there is a version mismatch.
Can you upgrade your protractor & reporter versions. Also make sure you have Jasmine2 as the framework in your config file
The below combination has been tested and is working fine
Protractor - 4.0.10
protractor-jasmine2-html-reporter - 0.0.7
Jasmine ~2
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!
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/**/*']);
});
What I do?
Run gulp (SCSS files are being processed, I get a CSS file)
I change any SCSS file again
Expected:
CSS file from 1. is updated with the changes from 2.
What happens?
CSS file from 1. isn't changed
Command line output:
$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed
gulpfile.js:
gulp.task('sass', function() {
watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('css'))
});
gulp.task('default', ['sass']);
Notes:
Issue on GitHub (gulp)
Issue on GitHub (gulp-watch)
gulpfile.js on GitHub Gist)
OS: Win7
node: 0.10.29
npm: 1.4.14
The way the source files are piped in is not important. The result stays the same when using gulp.src()
I dont think your sass task is correctly written.
Try something like this:
var gulp = require('gulp');
var sass = require('gulp-sass')
gulp.task('sass', function () {
gulp.src('PATH-TO-SASS-FILES/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});