27. var browserSync= require(‘browser-sync’);
gulp.task('js-watch', ['js'],browserSync.reload);
gulp.task('serve', ['js'], function () {
browserSync({
server: {
baseDir: "./src/"
},
port: 8080
});
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js-watch']);
});
30. ● Gulp is a build system to automate
tedious, repetitive but very important
tasks
● Tasks/Streams
● Learn to use gulp.task, gulp.src,
gulp.dest and gulp.watch
● Explore plugins
Wrap up
http://gulpjs.com
Good evening. My name is Chris Bautista. My presentation is about Gulp task runner.
Working as a developer, and I know you might identify with these, we tend to do a lot of other tasks building pages. These are just some of them. As a developer it’s second nature for us improve our workflow. That is where Gulp comes in.
Is a build/automation system built with Javascript and Nodejs. It’s built around the concept of streams as opposed to files like Grunt. Gulp leverages a plugin system to create flexibility in configuring your automated workflows.
Gulp is good for the automating any of the operations listed here and more. 8 sec
Gulp installation is very straightforward
You install gulp globally then install it as a development dependency for your projects
To configure Gulp tasks, we create and modify gulpfile.js
Once configured. Just run the gulp command to execute your tasks
Gulp has features that we should be familiar with.
Tasks are simply function definitions that contain the task you want to run. They can be used to work on simple tasks or more complex jobs.
When you run > gulp without switches/parameters you are actually calling the default task.
This is a typical web project structure. You have a src directory where you work, and a build folder where you put your optimized web application to be uploaded to a production server. Gulp enforces this practice
You capture files from a source file or directory then you process it as a stream and save it as you’ve configured it in the dest method.
First is streams
Gulp operates on the concept of streams- to put it simply - streams carry the result of a previous operation and pipes/pushes it to another. This usually does not result in a physical file until the very end of the task. As illustrated here.
this is a sample gulp file showing some common gulp operations. The stream is powered by the pipe method
Watch is another feature of Gulp where you keep an eye/ watch changes on a source file or directory then trigger a predefined task
Gulp’s magic is it numerouse plugins. A plugin is installed via a call in npm. Gulp plugins are always saved as a dev dependency.
Concat plugin simply combines all source files into a stream. SImilar to the cat method in Unix
Gulp-Uglify is a very common minification extension for gulp.
This usually follows a concatenate operation
Browsersync an excellent plugin used with gulp when testing your projects in browsers.
Browser sync is particularly useful when testing your project on multiple screens. Code changes are immediately applied to the browsers without you going to each device and reloading it.
There are other plugins you can use with gulp.
Gulp is a very useful tool that improves the way we tackle our web projects. Next steps, try auditing your workflow now, see if you can automate and improve on certain tasks. then install and configure gulp to do these tasks for you. Explore the many plugins and techniques curated on the gulpjs website to get an idea.
I added some URLs for some additional information.