Grunt (1)

Use grunt to automate front-end work. Currently, I am mainly using JS compression and CSS compression.

The directory must contain two files: gruntfile. js and package. Jason.

1. Package. JSON

This is equivalent to a configuration file using Grunt:

{  "name": "gruntjs.cn",   "version": "0.1.0",  "devDependencies": {    "grunt": "~0.4.2",    "grunt-contrib-uglify": "~0.1.1",    "grunt-contrib-cssmin":">0.0.0"  }}

The first is the project name and version number, and the last "devdependencies" contains all dependent plug-ins. Grunt, grunt's uglify (JS compression), grunt's cssmin (CSS compression) will be used later, so there are three configured in it.

 

When you first use grunt, you need to run the configuration file. For example, if my project is in the D: \ textz \ folder, add it to the project directory in cmd.

1. Configure

For example, if the CSS min plug-in is reconfigured, a folder is generated in the directory.

It contains the required plug-in files:

Ii. gruntfile. js

// Encapsulate the function module. exports = function (grunt) {// configure grunt for the task. initconfig ({PKG: grunt. file. readjson ('package. JSON '), uglify: {// JS compression options: {banner :'/*! <% = PKG. name %>-v <% = PKG. version %>-'+' <% = grunt. template. today ("yyyy-mm-dd") %> */'}, dynamic_mappings: {files: [{expand: True, CWD: 'src/', Src: ['*. js'], DEST: 'build/', ext :'. min. JS '}] }}, cssmin: {/* dynamic_mappings: {files: [{expand: True, CWD: 'css/'src: 'file.css', DEST: 'build/', ext: '.min.css'}] */CSS: {expand: True, CWD: 'css/', Src :'*. CSS ', DEST: 'build/', ext: '.min.css '}}}); // load the task // grunt. loadnpmtasks ('grunt-contrib-Compass '); grunt. loadnpmtasks ('grunt-contrib-uglify '); grunt. loadnpmtasks ('grunt-contrib-cssmin'); // execute the grunt task. registertask ('default', [/* 'uglify ', */'cssmin']);}

 

Grunt (1)