Gulp: Task Runner
Download as PPTX, PDF4 likes1,633 views
Gulp is a task runner and automation tool for JavaScript projects. It uses plugins and streams to automate repetitive tasks like concatenating, minifying, and optimizing files. Gulp tasks can be used to preprocess files with Sass, Less, and CoffeeScript, optimize images and assets, run tests, and watch for file changes to trigger builds or browser reloads. Plugins are installed via npm and used in gulpfiles to extend Gulp's capabilities. Common plugins preprocess CSS and JS, minify files, optimize images, and add browser syncing.
![gulp.task('setupJSWatch', function () {
gulp.watch('js/*.js', ['build']);
});
gulp.task('build', function () {
...
});](https://image.slidesharecdn.com/chrisbautistapresentation-gulp-6mins-150720021414-lva1-app6891/85/Gulp-Task-Runner-19-320.jpg)
![----- add plugins
> npm install gulp-[plugin] --save-dev
...
"devDependencies": { "gulp-concat": "^2.3.3",
"gulp-jshint": "^1.7.1",
"gulp-rename": "^1.2.0",
"gulp-sass": "^0.7.2",
"gulp-uglify": "^0.3.1" }](https://image.slidesharecdn.com/chrisbautistapresentation-gulp-6mins-150720021414-lva1-app6891/85/Gulp-Task-Runner-21-320.jpg)
![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']);
});](https://image.slidesharecdn.com/chrisbautistapresentation-gulp-6mins-150720021414-lva1-app6891/85/Gulp-Task-Runner-27-320.jpg)
Gulp: Task Runner
- 1. Gulp : Task Runner For Node Fundamentals @ BCIT
- 3. Linting Preprocessing Asset OptimizationPrepare Distribution Templating Project Interpolation Minify JS/CSS ? ? ? ? ? LESS/SASS Unit Tests Coffeescript
- 4. What is Gulp? ● Build system/Automation ● Built in Javascript ● Streams ● Plugins http://gulpjs.com
- 6. What it’s good for? ● Combine/Concatenate ● Preprocessing SASS/LESS Coffeescript etc. ● Optimizing assets ● Tests ● Code changes triggered tasks ● others via plugins
- 8. ---- install > npm install -g gulp > npm init > npm install gulp --save-dev ----- configure > nano gulpfile.js ----- run > gulp
- 10. Tasks
- 11. gulp.task('js', function () { ... }); gulp.task('css', function () { ... }); gulp.task('server', function () { ... pipe(livereload());//browser reload }); gulp.task('default', function () {
- 13. webapp/ ├── build │ ├── images │ ├── css │ └── js │ └── vendor ├── node_modules │ ├── gulp │ ├── gulp-concat │ ├── gulp-html-replace │ ├── gulp-notify │ ├── gulp-uglify │ └── gulp-uglifycss ├── src │ ├── images │ ├── css │ └── js │ └── vendor ├── package.json
- 14. // process js files save to build/js gulp.task('js', function () { return gulp.src('src/js/*.js') .pipe(gulp.dest('build/js')); });
- 15. Streams and Pipe
- 17. gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); });
- 18. Watch
- 19. gulp.task('setupJSWatch', function () { gulp.watch('js/*.js', ['build']); }); gulp.task('build', function () { ... });
- 21. ----- add plugins > npm install gulp-[plugin] --save-dev ... "devDependencies": { "gulp-concat": "^2.3.3", "gulp-jshint": "^1.7.1", "gulp-rename": "^1.2.0", "gulp-sass": "^0.7.2", "gulp-uglify": "^0.3.1" }
- 22. > npm install --save-dev gulp-concat concat
- 23. var concat = require(‘gulp-concat’); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(concat('app.js')); .pipe(gulp.dest('build')); });
- 24. > npm install --save-dev gulp-uglify uglify
- 25. var concat = require(‘gulp-uglify’); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(concat('app.js')); .pipe(uglify()); .pipe(gulp.dest('build')); });
- 26. > npm install --save-dev browser-sync browsersync
- 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
- 31. ● References ○ http://gulpjs.com ○ http://www.smashingmagazine.com/2014/06/11/bui lding-with-gulp/ ○ http://www.browsersync.io/docs/gulp/ ○ https://www.npmjs.com/search?q=gulp ○ https://github.com/yeoman/generator-gulp-webapp Gulp: Task Runner
- 32. NodeJS Fundamentals @ BCIT chris@codespud.ca @chrisbautista The End
Editor's Notes
- #2: Good evening. My name is Chris Bautista. My presentation is about Gulp task runner.
- #4: 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.
- #5: 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.
- #7: Gulp is good for the automating any of the operations listed here and more. 8 sec
- #9: 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
- #10: Gulp has features that we should be familiar with.
- #12: 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.
- #14: 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
- #15: 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.
- #16: First is streams
- #17: 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.
- #18: this is a sample gulp file showing some common gulp operations. The stream is powered by the pipe method
- #20: Watch is another feature of Gulp where you keep an eye/ watch changes on a source file or directory then trigger a predefined task
- #22: 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.
- #24: Concat plugin simply combines all source files into a stream. SImilar to the cat method in Unix
- #25: Gulp-Uglify is a very common minification extension for gulp.
- #26: This usually follows a concatenate operation
- #27: Browsersync an excellent plugin used with gulp when testing your projects in browsers.
- #28: 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.
- #29: There are other plugins you can use with gulp.
- #31: 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.
- #32: I added some URLs for some additional information.