Menu
I try to DRY my gulpfile. There I have small duplication of code I not comfortable with. How can this be made better?
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.coffee')
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(coffee())
.pipe(gulp.dest('dist/scripts/'))
.pipe(gulp.src('src/index.html')) // this
.pipe(includeSource()) // needs
.pipe(gulp.dest('dist/')) // DRY
});
gulp.task('index', function() {
return gulp.src('src/index.html')
.pipe(includeSource())
.pipe(gulp.dest('dist/'))
});
I got index as a separate task, since I need to watch src/index.html to livereload. But I'm also watching my .coffee sources and when they change, I need to update src/index.html as well.
How can I pipe to index in scripts?
961
pipe() method attaches a Writable stream to the readable, causing it to switch automatically into flowing mode and push all of its data to the attached Writable.
If you just want a task that runs some function, then just do that: gulp. task('my-custom-task', function () { myCustomFunction('foo', 'bar'); });
series() Combines task functions and/or composed operations into larger operations that will be executed one after another, in sequential order.
You can run multiple tasks at a time by creating default task in the configuration file as shown in the following code − Gulp file is set up and ready to execute. Run the following command in your project directory to run the above combined tasks −
Where “task-name” is a string name and “function ()” performs your task. The “gulp.task” registers the function as a task within the name and specifies the dependencies on other tasks. Let's take one plugin called minify-css to merge and minify all CSS scripts. It can be installed by using npm as shown in the following command −
The Beginner’s Guide to Gulp. What is gulp and how can you use it in… | by Emmanuel Akhigbe | The Startup | Medium Gulp is a free Javascript toolkit that helps you automate the running of tasks that are part of your workflow; this in turn helps you focus on the actual development of your project.
To register a task publicly, export it from your gulpfile. // The `clean` function is not exported so it can be considered a private task. // It can still be used within the `series ()` composition. // The `build` function is exported so it is public and can be run with the `gulp` command. // It can also be used within the `series ()` composition.
gulp enables you to order a series of tasks based on arguments.
Example:
gulp.task('second', ['first'], function() {
// this occurs after 'first' finishes
});
Try the following code, you will be running the task 'index' to run both tasks:
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.coffee')
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(coffee())
.pipe(gulp.dest('dist/scripts/'));
});
gulp.task('index', ['scripts'], function() {
return gulp.src('src/index.html')
.pipe(includeSource())
.pipe(gulp.dest('dist/'))
});
The task index will now require scripts to be finished before it runs the code inside it's function.
113
If you look into the Orchestrator source, particularly the .start() implementation you will see that if the last parameter is a function it will treat it as a callback.
I wrote this snippet for my own tasks:
gulp.task( 'task1', () => console.log(a) )
gulp.task( 'task2', () => console.log(a) )
gulp.task( 'task3', () => console.log(a) )
gulp.task( 'task4', () => console.log(a) )
gulp.task( 'task5', () => console.log(a) )
function runSequential( tasks ) {
if( !tasks || tasks.length <= 0 ) return;
const task = tasks[0];
gulp.start( task, () => {
console.log( `${task} finished` );
runSequential( tasks.slice(1) );
} );
}
gulp.task( "run-all", () => runSequential([ "task1", "task2", "task3", "task4", "task5" ));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
