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:
var optimizejs = require('gulp-optimize-js');
gulp.task('optimize', function() {
gulp.src('./js/minified.js')
.pipe(optimizejs(options))
.pipe(gulp.dest('./dist/'))
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- 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:
$ npm install --save-dev [email protected] [email protected]
optimize: {
css: {
src: developmentAssets + '/css/*.css',
dest: productionAssets + '/css/',
options: {}
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp/config.js
var gulp = require('gulp');
var csso = require('gulp-csso');
var size = require('gulp-size');
var config = require('../../config').optimize.css;
/**
* Copy and minimize CSS files
*/
gulp.task('optimize:css', function() {
return gulp.src(config.src)
.pipe(csso(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
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.
$ npm install --save-dev [email protected]
optimize: {
css: {
...
},
js: {
src: developmentAssets + '/js/*.js',
dest: productionAssets + '/js/',
options: {}
}
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp/config.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var size = require('gulp-size');
var config = require('../../config').optimize.js;
/**
* Copy and minimize JS files
*/
gulp.task('optimize:js', function() {
return gulp.src(config.src)
.pipe(uglify(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
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.