Skip to main content

frontend-grunt-tasks

Grunt tasks that front-end developers should use to improve website's performance with no configurations and 1 command to run it right away.

Requires

Installation

  • Clone Git repository or download with .zip
  • Go to this folder and run command:
npm install  

Configuration

After cloning, your folder/file structure look like this:

Files structrue

If you want to change source or distribution folder, go to Gruntfile.js and edit directories

    src: 'src', //source
    dist: 'dist', //distribution

Usage

  • DISTRIBUTION

Minify all JS, CSS, HTML, images, remove unuse CSS

grunt build         //recommend  

Result:

Files structrue

Files that are joined will be named xxx.concat.js | xxx.concat.css

CSS files that are removed unuse will be named xxx.uncss.css


Minify and join all CSS, JS into one

grunt build:concat  

Notice: To make sure CSS, JS files aren't messed up. Please named those files in the order. I recommned: $-style.css. "$" will be replaced by your order.

Examples: 1-reset.css | 2-style.css 1-jquery.js | 2-init.js

  • LINTER

Check CSS, JS errors

grunt lint  
  • OTHERS

Minify all CSS, JS, HTMLs

grunt min  

Minify all CSS, JS, HTMLs and put CSS, JS into one.

grunt min:concat  



Comments

Popular Posts