Introduction to GulpJs
Download as ODP, PDF1 like240 views
Gulp is a task and build runner that automates repetitive development tasks such as preprocessing, minifying, and optimizing files through a streaming build system. The document outlines the Gulp workflow, including defining tasks, reading and writing files, and watching for changes. It also provides guidelines on getting started with Gulp by installing it and creating necessary configuration files.
![Getting Started
$ npm install -g gulp
$ npm install –save-dev [plugin_name]
Create gulpfile.js & package.json
Create both of them at root directory](https://image.slidesharecdn.com/knolxgulp-151029062906-lva1-app6891-151205062837-lva1-app6892/85/Introduction-to-GulpJs-16-320.jpg)
Introduction to GulpJs
- 1. Introduction to Gulp Automate and enhance your workflow Hari Chand Software Consultant Knoldus software LLP
- 2. Agenda ● What is Gulp? ● Why Gulp? ● Gulp workflow ● API ● Getting Started ● Install Gulp ● Demo
- 3. A BUILD SYSTEM A TASK RUNNER A WORKFLOW AUTOMATER Automate your repetitive tasks like preprocessing, minifying, concatenating and optimizing files
- 4. What is Gulp Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass/less files, uglify and compress js files and much more. The kicker for gulp is that its a streaming build system which doesn't write temp files. It's like Pipes in bash. ● Front-end developement tool ● Task automation in javascript ● Streaming build system
- 5. Why use Gulp ● Gulp solves the problem of repetition ● Bundling and minifying libraries and stylesheets ● Less/Sass to CSS compilation ● Copying modified files to an output directory ● Saving time
- 7. Gulp API API Purpose gulp.task Define a task gulp.src Read files in gulp.dest Write files out gulp.watch Watch files for changes
- 8. gulp.task gulp.task defines a task. A task contains the operations you want to execute, where the operations are commonly provided by plugins. name The name of the task. The task name will be accessible via the CLI, so make it something meaningful dependencies An optional array of tasks to be completed prior to your task
- 9. gulp.task function The function that performs the task’s operations. The function typically follows the pattern of collecting files from the file system, performing some operations provided by plugins, and writing the result back to the file system. We’ll take a closer look at this later. Below we are defining a task named template with a dependency on the minify task. The minify task will be executed and completed prior to the template task.
- 10. gulp.src gulp.src will often be the first operation to perform within the task function as it collects the files from the file system on which your task will operate. It takes a file matching pattern (glob), representing the file structure to read, and returns a readable stream. glob The node-glob file pattern to read. The glob simply refers to pattern matching based on wildcard characters.
- 11. gulp.src options An optional parameter to further define file criteria, such as the Current Working Directory, or whether your task needs the contents of the file read from the file system. Occasionally you may just need the file path and not the contents. Below example is collecting all files with the js file extension located in the scripts directory or any of its subdirectories
- 12. gulp.dest options gulp.dest writes files to the specified path and is commonly the last step in the task function. path The output directory path. example writes the output files to the dist directory.
- 13. gulp.watch gulp.watch performs one or more tasks when specified files change. To avoid manually rerunning the build tasks after the developer makes changes, the watch method can be configured to do this automatically by executing certain tasks when particular files are changed glob The node-glob file pattern that indicates the files to monitor for changes. options An optional parameter to further define file criteria, such as the Current Working Directory
- 14. gulp.watch tasks An array of tasks to be executed when a file changes.
- 15. Getting Started
- 16. Getting Started $ npm install -g gulp $ npm install –save-dev [plugin_name] Create gulpfile.js & package.json Create both of them at root directory
- 17. package.json
- 18. gulpfile.js
- 19. Thank You
Editor's Notes
- #18: To setup an Automated Build Create a Docker Hub account and login. Link your GitHub or Bitbucket account through the “Link Accounts” menu. Configure an Automated Build. Pick a GitHub or Bitbucket project that has a Dockerfile that you want to build. Pick the branch you want to build (the default is the master branch). Give the Automated Build a name. Assign an optional Docker tag to the Build. Specify where the Dockerfile is located. The default is /. Once the Automated Build is configured it will automatically trigger a build and, in a few minutes, you should see your new Automated Build on the Docker Hub Registry. It will stay in sync with your GitHub and Bitbucket repository until you deactivate the Automated Build.