gulp - Gulp Optimizing CSS and JavaScript - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
How to Optimizing CSS and JavaScript?
- Here, we will learn on how to optimize the CSS and JavaScript.
- To remove unwanted data, optimizing is required (for e.g. spaces) from the source files.
- This will reduce the size of the files and lets them to load files faster.
Usage:
- Please consult optimize-js for available options.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
CSS:
- First, we will write a task, which will optimize the CSS.
- Compass is able to minimize the CSS for production, but this Gulp.js task squeezed another 6 KB out of my files.
install the needed Gulp.js plugins:
gulp/config.js
gulp/tasks/production/optimize-css.js
This task will copy the CSS files from the assets folder, minimize them, remove comments, output the size of the file and copy them to the production assets folder.
JavaScript:
- Now the CSS is minimized and the same has to be done to the JavaScript files.
- We use UglifyJS for this task. If you don’t like it, go ahead and use a Google Closure or YUI compressor Gulp.js task.
gulp/config.js
gulp/tasks/production/optimize-js.js
This task will take the JavaScript files, minimize and optimize them, put them to my production assets folder and output the size.