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 gulp-csso@2.0.0 gulp-size@2.0.0
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 gulp-uglify@1.0.1
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.


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 , gulp serve , npm gulp , gulp less , npm save dev , gulp imagemin , gulp clean , gulp livereload , gulp command not found , gulp dest , gulp copy , npm watch , gulp build , gulp connect , npm sass , gulp if , gulp scss , gulp minify js , browserify gulp , gulp jshint , gulp pipe , npm install save dev , npm install dev gulped meaning , js uglify , gulp bower , gulp plugins , gulp definition , gulp start , compilation pipe , gulp changed , install gulp windows , gulp npm , gulp cli , gulp angular , gulp run , gulp version , gulp wiki , gulp file , define gulp , gulp path , run gulp , typescript gulp , gulp concat css , javascript pipe , sass gulp , install gulp ubuntu , what is gulp js , gulp command

Related Searches to Gulp - Optimizing CSS and JavaScript