gulp Comprehensive Guide to a Front-end Workflow Automation with Gulpjs -1 of 2 Installing Plugins for Responsive images|Css Minification|Js minification
Example
Our goal , is to
- Make your Images conform to widths and scale appropriately, by generating a battery of images of varied widths, and to minify them
- Lint your Javascript
- Minimize your assets - JS/CSS/HTML , thus enabling you to host a lighter than lightest code
- Watch the css/js/image files for change , and rebuild optimizations
- 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
