I have simple code of generator:
function *foo(){}
I have a gulp babel which looks like this:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('src/app.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('dist'));
});
When u run gulp it finished nice but when i go to html page where I'm adding my dist/app.js file i see an error in console:
ReferenceError: regeneratorRuntime is not defined
I've read about it but its recommended to add a plugin which handle generators and when I'm doing that I have an error that require is not defined... Can someone please tell how to make babel working well with generators step-by-step?
You need to include babel-polyfill in your build
Babel includes a polyfill that includes a custom regenerator runtime and core-js.
Install babel-polyfill
$ npm install --save-dev babel-polyfill
Make sure you add this to src/app.js
// src/app.js
import "babel-polyfill";
Related
I took this from the Gulp documentation:
const { series, parallel } = require('gulp');
function clean(cb) {
console.log("clean");
cb();
}
function css(cb) {
console.log("css");
cb();
}
function javascript(cb) {
console.log("javascript");
cb();
}
exports.build = series(clean, parallel(css, javascript));
When I run this with gulp build, I get:
Task never defined: build
If I run ./node_modules/.bin/gulp build, it works.
And if I change the exports to:
exports.build = css
and run with gulp build, then it works too.
What am I doing wrong?
I've tried this on the WSL (Linux, my default env), but also on Windows directly. Another developer on my team doesn't have this issue, although he is running on a Mac. I've also tried different versions of Node.
Updating from gulp v4.0.0 to v4.0.1 fixes this issue.
Issue is with local vs global version of gulp.
use 'node gulp build' or 'yarn gulp build' (if you are using yarn)
This will solve your issue.
So whats happening is when I edit a scss file and save, gulp task runs with no errors but excludes that files content in my main default.css.
I switch to another scss file, edit that and THAT one is now exluded but the previous gets compiled.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('scss', function () {
return gulp.src('assets/resources/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
gulp.watch('assets/resources/**/*.scss', ['scss']);
});
gulp.task('default', ['scss', 'watch']);
No idea whats going on and not even sure if this is the right place to post this but im at my wits end.
Should also note that doing a normal sass watch from the command line works fine, no issues there.
Gulp 3.9.1
Gulp-sass 4.0.1
Node-sass 4.9.0
File structure if it helps
assets/css/default.css
assets/resources/default.scss
assets/resources/base/<scss files>
assets/resources/modules/<scss files>
So the problem was with gulp-sass.
Uninstalled it then installed gulp-ruby-sass, tweaked task based on the help file and it's working perfectly now
I have installed gulp using different ways like,
npm install gulp
npm install gulp -g
npm install gulp -g --save-dev
When I do gulp -v, it gives me the version but when I write gulp nothing happens. whats wrong?
Edit: Here is my gulp file,
var gulp = require('gulp');
gulp.task('default', function () {
// write something here
});
gulp.task('jshint', function(){
gulp.src('js/script.js')
.pipe(jshint)
.pipe(jshint.reporter('default'));
})
After debugging I found the solution. I had given a wrong name (gulp.js) to the gulp file. It should be gulpfile.js. I changed the name and it started working.
I am trying to run the Aurelia skeleton-es2016-asp.net5 demo.
I am following the steps in read me.
I opened a command box and ran
npm install gulp
which seemed to work
however ehrn I now run
gulp watch
I get an error
No gulpfile found
Have you created gulpfile.js containing the gulp tasks ?
If No, you need to add gulpfile.js to your directory root and may write some default task in it for testing,
var gulp = require('gulp');
gulp.task('default', function () { console.log('Hello Gulp!') });
If yes, Try Installing gulp globally npm install -g gulp
When I run the gulp task (default) for the first time, the sass task gives an error on a Bower package. More specifically on Susy.
The error:
Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
file to import not found or unreadable: su/utilities
Current dir: /Users/Jeroen/sites/gulp/bower_components/susy/sass/susy/
The Susy bower package is being installed successfully with gulp-bower, taking its information from my bower.json file. However, when the default task gets to the sass task, it can't find Susy.
style.scss
#import "../bower_components/susy/sass/susy";
This only occurs when I run gulp for the first time. The watch task doesn't stop/breaks after this error, and keeps working after. (I can compile sass without a problem).
But it looks abit messy, any ideas on how I can prevent this?
You can see my entire gulpfile.js here:
https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0
Tips on how I can improve my gulpfile, unrelated to this question, are also welcome.
In this line
gulp.task('default', ['bower', 'sass', 'scripts', 'imagemin', 'iconfont', 'watch']);
All of the tasks are getting executed in parallel. Which is fine if you don't have any dependencies. However, judging from your explanations, a successful run of sass is strongly dependent on a successful execution of bower. At the time you run sass, bower might not be finished, thus not providing the files you need.
To solve that in Gulp 3.*, you need to wire your dependencies right. I'd suggest the following:
// Define plugins
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins');
$ = gulpLoadPlugins();
gulp.task('bower', function() {
return $.bower()
.pipe(gulp.dest('./bower_components'))
});
// Sass compile + prefix task
gulp.task('sass', ['bower'], function(){
...
});
// Default Task
gulp.task('default', ['sass', 'scripts', 'imagemin', 'iconfont']);
// Watch Task
gulp.task('watch', ['default'], function(){
gulp.watch('sass/**/*.scss', ['sass']);
gulp.watch('js/*.js', ['scripts']);
gulp.watch('originals/*', ['imagemin']);
gulp.watch('icons/*.svg', ['iconfont']);
});
And ruf gulp watch. This will execute all tasks which can be run in parallel at the same time, but bower will be executed before sass. One problem you might face: Running bower everytime you'll execute sass. That's why we will use gulp-changed to prevent reruns.
gulp.task('bower', function() {
return $.bower()
.pipe(changed('./bower_components'))
.pipe(gulp.dest('./bower_components'))
});
Hope this helps