Gulp and bower Implementation
Download as PPTX, PDF0 likes663 views
Gulp is a JavaScript task runner for front-end development that automates tasks such as file bundling, browser refreshing, and file copying. It utilizes a gulpfile.js to define tasks like linting, SASS compilation, and file watching, and requires Node.js and npm for installation. Additionally, Bower serves as a front-end package manager that installs packages and their dependencies, but does not process them further.
Gulp and bower Implementation
- 2. What is Gulp? Gulp is a javascript task runner for front end development built in node.js and npm that lets you automate tasks such as… ● Bundling and minifying libraries and stylesheets. ● Refreshing your browser when you save a file. ● Less/Sass to CSS compilation ● Copying modified files to an output directory
- 3. Why Gulp? ● Saving time ● Easy to use ● Repetitive, tedious tasks
- 4. The simple gulp API There are only 4 api’s in gulp! API Purpose gulp.task Define a task gulp.src Read file in gulp.dest Write file out gulp.watch Watch file for change
- 5. More technically .. ● gulpfile.js - Tells Gulp for every tasks, what those tasks are, when to run them. ● Package.json - List of installed plugins Create both of them at root directory
- 6. Installing gulp via npm Install Node When Installing gulp we first need to install node.js which can be found at: https://nodejs.org/en/download/ Once downloaded install node on default settings. After the installation is finished you can go to command prompt and type: node -v If it displays the version then the node has been setup properly and we can move to next step.
- 7. Navigate your project directory Once you have made it to your project directory - let's run a quick npm command to initialize our package.json file. This will prompt us to answer a few questions about our project. Once completed, it will create a file in the root directory of the project called package.json which will provide information about the project and its dependencies.
- 8. Next step : Installing gulp globally When you're ready to install gulp, jump back to your command-line application and type: Let’s take a moment to break this down. npm is the application we are using to install our package. We are running the install command on that application. The -g is an optional flag used to signify that we want to install this package globally so that any project can use it. And finally, gulp is the name of the package we would like to install.
- 9. Next step : check gulp version and install locally This should return the version number on the next line of your command-line. Next, we also need to install gulp locally. One this --save-dev flag which instructs npm to add the dependency to our devDependencies list in our package.json file that we created earlier.
- 10. Find npm gulp packages We can search gulp packages in link below: https://www.npmjs.com/package/gulp
- 11. Setting up gulp dependencies We have our package.json file initialised and gulp setup completed. Now, we are installing the dependencies required for compiling your SASS file into CSS file. Examples of npm packages for gulp are showed on the left side of the slide. The first one will install sass compiler for gulp. Similarly, the second one will install the package for generating sourcemap for our compiled CSS file and finally the last one will install the package to check js/javascript. These are just the examples of packages and you can use any package you want according to your preferences, you can search for packages at: https://www.npmjs.com/ npm install gulp-sass --save-dev npm install gulp-sourcemaps --save-dev npm install gulp-jshint --save-dev Or alternatively you can run npm install gulp-jshint gulp-sass gulp- concat gulp-uglify gulp-sourcemaps --save- dev
- 12. Create our gulpfile.js In the root directory of the project create a new file and name it gulpfile.js The main task of gulpfile.js is to give instruction to gulp to perform certain tasks and this is where our automation will start.
- 13. gulpfile.js continued Once the gulpfile.js has been created type the text on the left on the file. Here we are defining variable for the dependencies that we installed earlier. // Include gulp var gulp = require('gulp'); // Include Our Plugins var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');
- 14. Lint task Our lint task checks any JavaScript file in our js/ directory and makes sure there are no errors in our code.
- 15. Sass task The sass task compiles any of our Sass files in our scss/ directory into CSS and saves the compiled CSS file in our dist/css directory.
- 16. Script task The scripts task concatenates all JavaScript files in our js/ directory and saves the ouput to our dist/js directory. Then gulp takes that concatenated file, minifies it, renames it and saves it to the dist/js directory alongside the concatenated file.
- 17. Watch task The watch task is used to run tasks as we make changes to our files. As you write code and modify your files, the gulp.watch() method will listen for changes and automatically run our tasks again so we don't have to continuously jump back to our command-line and run the gulp command each time.
- 18. Defult task Finally, we have our default task which is used as a grouped reference to our other tasks. This will be the task that is ran upon entering gulp into the command line without any additional parameters. Now, all we have left to do is run gulp. Switch back over to your command-line and type: or This will call gulp and run everything we have defined in our default task.
- 19. Error log (Watch stops on errors) We can see details of error log in the terminal by adding function below You should set this error callback on each task that may fail Error example
- 20. Browsersync Browsersync for live reloading, interaction synchronization etc First, you'll need to install Browsersync & Gulp as development dependencies. Then, use them within your and add ‘browser-sync’ task in gulp default task in ‘gulpfile.js’
- 22. What is bower? a Package manager for the Web Bower is a front-end package manager built by Twitter. Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
- 23. Install Bower Bower is a command line utility. Intstall it with npm. Bower requires node, npm and git. Troubleshooting https://bower.io/ https://github.com/bower/bower/wiki/Troubl eshooting First install bower globally
- 24. Search packages Search Bower packages and find the registered package names for your favorite projects. Or command followed by what you are searching for:-
- 25. Install packages Install packages with bower install. Bower installs packages to bower_components/. Or command followed by what you are searching for:- or
- 26. Save packages Create a bower.json file for your package with bower init.
- 27. Use packages Check path of install packages. Using command bower list --path
- 28. Some useful command line reference ● cache ● help ● home ● info ● init ● install ● link ● list login lookup prune register search update uninstall unregister