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.
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?
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 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/**/*']);
});
I've just started using gulp for the first time, required all the plugins I want to use and written the first task for sass compilation. It seems to work but there are two problems, firstly when I type gulp on the command line it seems to take 3 or 4 seconds to start which seems slower than grunt (I started using gulp because I understood it was faster). Is this normal?
The main problem though is that I have a default task which calls the sass task. The command line output seems to suggest that both are being run which means the sass is being compiled twice. It is also outputting my single gulp-notify notification twice which doesn't seem right.
Here is the command line output...
λ gulp default
[00:53:40] Using gulpfile ~\Desktop\jon\gulpfile.js
[00:53:40] Starting 'sass'...
[00:53:40] Finished 'sass' after 10 ms
[00:53:40] Starting 'default'...
[00:53:40] Finished 'default' after 7.93 μs
[00:53:41] gulp-notify: [Gulp notification] Css created
[00:53:41] gulp-notify: [Gulp notification] Css created
And here is my gulp file in full...
var gulp = require('gulp'),
gutil = require('gulp-util'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
traceur = require('gulp-traceur'),
svgmin = require('gulp-svgmin'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
expect = require('gulp-expect-file'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
src: "src",
css: "stylesheets",
img: "images",
js: "js"
}
// Compile Our Sass
gulp.task('sass', function() {
gulp.src(paths.src + '/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
sass: 'src/sass',
environment: 'development',
outputStyle: 'expanded',
debugInfo: false,
noLineComments: true
}))
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css))
.pipe(notify({ message: 'Css created' }));
});
// Dev Task
gulp.task('default', ['sass']);
Anybody know what's going on here? Have I misunderstood how Gulp tasks work?
Use the onLast option of gulp-notify if you only want a single notification per-stream:
//...
.pipe(notify({message: 'Css created', onLast: true}));
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'));
});