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/**/*']);
});
Related
(Pertains to Gulp 4.0/ES6)
I would like to create a task file that can be imported by main gulpfile.js and can also be run directly from the command line using gulp (in this case without even referencing the gulpfile.js file on command line). Is this possible?
I can create a gulp task file that can be run directly:
task-a.js:
const log = require('fancy-log');
function taskA(done){
// do stuff
log('Executing task A');
done();
}
exports.default = taskA;
Run from command line:
gulp -f task-a.js
[17:53:21] Using gulpfile C:\app\task-a.js
[17:53:21] Starting 'default'...
[17:53:21] Executing task A
[17:53:21] Finished 'default' after 2.73 ms
OK, looks good.
In order to import into gulpfile.js I need to modify the export in task-a.js to:
task-a.js:
// modified the exports for require()
module.exports taskA;
gulpfile.js:
const taskA = require('./task-a');
gulp.task('default', taskA);
gulp -f gulpfile.js
OK, this also works.
But is it possible to change the exports in task-a.js to allow for both import and to be run from command line using gulp?
One way to export the function in task-a.js as a task:
gulp.task('default', taskA);
module.exports = gulp.series('default');
This ensures that the gulpfile.js can import the function as a composed operation.
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?
Hi i'm trying to run some gulp task on netlify for building Hugo web.
I wonder how to run serial gulp task on netlify,
by the way this is my gulpfile.js
var gulp = require('gulp');
var removeEmptyLines = require('gulp-remove-empty-lines');
var prettify = require('gulp-html-prettify');
var rm = require( 'gulp-rm' );
var minifyInline = require('gulp-minify-inline');
gulp.task('tojson', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines())
.pipe(gulp.dest('public/./'));
});
gulp.task('htmlClean', function () {
gulp.src('public/**/*.html')
.pipe(removeEmptyLines({
removeComments: true
}))
.pipe(gulp.dest('public/./'));
});
gulp.task('templates', function() {
gulp.src('public/**/*.html')
.pipe(prettify({indent_char: ' ', indent_size: 2}))
.pipe(gulp.dest('public/./'))
});
gulp.task('minify-inline', function() {
gulp.src('public/**/*.html')
.pipe(minifyInline())
.pipe(gulp.dest('public/./'))
});
where should i put the command to run all my gulps task in Netlify?
There are two places to setup your build commands in Netlify.
Admin Option
Put your commands in the online admin under the Settings section of your site and go to Build & Deploy (Deploy settings) and change the Build command:
Netlify Config file (netlify.toml) Option
Edit/add a netlify.toml file to the root of your repository and put your build commands into the context you want to target.
netlify.toml
# global context
[build]
publish = "public"
command = "gulp build"
# build a preview (optional)
[context.deploy-preview]
command = "gulp build-preview"
# build a branch with debug (optional)
[context.branch-deploy]
command = "gulp build-debug"
NOTE:
The commands can be any valid command string. Serializing gulp commands would work fine if you do not want to create a gulp sequence to run them. In example, gulp htmlClean && hugo && gulp tojson would be a valid command.
Commands in the netlify.toml will overwrite the site admin command.
You can string your tasks together like this:
add another plugin with NPM:
https://www.npmjs.com/package/run-sequence
var runSequence = require('run-sequence');
gulp.task('default', function (callback) {
runSequence(['tojson', 'htmlClean', 'templates', 'minify-inline'],
callback
)
})
Then run $ gulp
There's a section on run-sequence on this page that will help:
https://css-tricks.com/gulp-for-beginners/
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.