gulp Installing Plugins for Responsive images|Css Minification|Js minification


Example

Our goal , is to

  1. Make your Images conform to widths and scale appropriately, by generating a battery of images of varied widths, and to minify them
  2. Lint your Javascript
  3. Minimize your assets - JS/CSS/HTML , thus enabling you to host a lighter than lightest code
  4. Watch the css/js/image files for change , and rebuild optimizations
  5. Synching your changes while in development, on to a browser serving your site.

We need a number of plugins, so let us install all of them. Please run all these in the project's root folder.

Image processing plugins

bash $ npm install --save-dev gulp-responsive 
bash $ npm install --save-dev gulp-imagemin 
bash $ npm install --save-dev imagemin
bash $ npm install --save-dev imagemin-jpeg-recompress
bash $ npm install --save-dev imagemin-pngquant 

Asset optimizer plugins

bash $ npm install --save-dev gulp-clean-css
bash $ npm install --save-dev gulp-uglify
bash $ npm install --save-dev gulp-minify-html
bash $ npm install --save-dev gulp-jshint
bash $ npm install --save-dev gulp-concat
bash $ npm install --save-dev gulp-autoprefixer