Manage your static engineering with grunt

Recently wrote a static page, after writing it will be uploaded to the static server. But I have a problem, that is, every time you modify the file, you need to find some code compression site to compress static files. Is there any way to automate the process? The answer, of course, is yes.

We can borrow grunt to help us finish. Only the existing project needs to be configured as a grunt project. Then let's take a look at it:

First step: Install the grunt locally

Grunt is based on node. js So install node http://nodejs.org/download/first

Installing grunt

NPM install-g GRUNT-CLI

If the above installation is not successful, you can also try to use the domestic agent,

NPM install-g cnpm--registry=http://r.cnpmjs.org

Install the CNPM domestic mirror and replace all NPM commands with CNPM for later execution

Step Two: Configure the Grunt Project

Using grunt mainly involves two files Package.json and Gruntfile.js, if the classmate who is familiar with node should know Package.json is a file that describes the engineering and configuration dependencies. The same is true here, Gruntfile.js is the script that grunt runs.

These two files can be added manually or copied from other projects. We can also generate the Package.json file automatically by command.

Let's start by creating an empty file Gruntfile.js in the project, and then enter the command: NPM Init configures the project according to the prompts. Note To specify "main": "Gruntfile.js" the other can go all the way to use the default value. The file is ready, we can open it to the dependent configuration (add devdependencies node), and here's My project example:

1 {2"Name": "XXX",3"Version": "1.0.0",4"description": "",5"Main": "Gruntfile.js",6"Scripts": {7"Test": "Echo \" Error:no test specified\ "&& exit 1"8   },9"Repository": {Ten' type ': ' Git ', One"url": "" A   }, -"Author": "", -"License": "ISC", the"Dependencies": { -"Grunt": "~0.4.5", -"Grunt-contrib-uglify": "~0.6.0", -"Grunt-contrib-cssmin": "~0.10.0" +   }, -"Devdependencies": { +"Grunt": "^0.4.5", A"Grunt-contrib-concat": "~0.5.0", at"Grunt-contrib-copy": "~0.6.0", -"Grunt-contrib-less": "~0.11.4", -"Grunt-contrib-requirejs": "~0.4.4", -"Grunt-contrib-watch": "~0.6.1", -"Grunt-replace": "~0.8.0", -"Underscore": "~1.7.0" in   } -}

So the Package.json file is written, then we will install the dependency according to Package.json configuration, by Git bash into the project directory, enter NPM install or CNPM install will package.json-> Download the dependent package specified under Devdependencies to Node_modules

After we've installed it, we can write gruntfile.js files. Detailed rules can refer to the examples given in the official website http://www.gruntjs.org/docs/sample-gruntfile.html for my project I wrote:

1//varFS = require (' FS ');2//var_ = require (' underscore ');3 4Module.exports =function(grunt) {5     //var jsfinal = [], cssfinal = [];6 7     //project Configuration8 Grunt.initconfig ({9Pkg:grunt.file.readJSON (' Package.json '),Ten  One uglify: { A options: { - mangle: { -except: [' Requirejs ', ' require ', ' Define ', ' module ', ' exports ', ' MD5 ', ' _ ', ' JQuery '] the                 } -             }, - build:{ - files: { +' Build/js/main.js ': [' js/index.js '] -                 } +             }, A Combine: { atExpandtrue, - files: { -' Build/js/lib.js ': [' js/zepto.min.js ', ' js/pxloader.js ', ' js/pxloaderimage.js ', ' idangerous.swiper.min.js '] -                 } -             } -         }, in copy: { - Main: { to files: [ +{Expand:true, src: ' *.html ', dest: ' build/' } -                 ] the             }, * binary: { $ files: [Panax Notoginseng{Expand:true, src: ' images/** ', dest: ' build/'} -                 ] the             } +         }, A concat: { the options: { +Stripbanners:true -             }, $ Combine: { $Expandtrue, - files: { -' Build/css/base.css ': [' css/idangerous.swiper.css ', ' css/animate.css ', ' css/index.css '], the' Build/css/main.css ': [' css/index.css '] -                 }Wuyi             } the         }, -         //Watch: { Wu         //LESSC: { -         //files: [' styles/*.less '], About         //tasks: [' less '], $         //options: { -         //Spawn:false, -         //         }, -         //     }, A         // } + cssmin: { the options: { -' Compatibility ': ' IE8 ' $             }, the Combine: { theExpandtrue, the  the files: { -' Build/css/base.min.css ': [' build/css/base.css '], in' Build/css/main.min.css ': [' build/css/main.css '] the                 } the             } About         } the  the  the  +     }); -  the Bayi     //Grunt official task load theGrunt.loadnpmtasks (' Grunt-contrib-copy '); theGrunt.loadnpmtasks (' grunt-contrib-uglify '); -Grunt.loadnpmtasks (' Grunt-contrib-concat '); -Grunt.loadnpmtasks (' Grunt-contrib-cssmin '); the     //grunt.loadnpmtasks (' Grunt-contrib-watch '); the  the  the     //Custom Tasks -Grunt.registertask (' Default ', [' concat ', ' cssmin ', ' Copy ', ' Uglify ']); the  the}

When these two files are all finished, we can run the grunt command to generate our target file, where I specify the build into the Builds folder.

Step Three: Submit

When I was ready to commit, I found git monitoring some files I didn't want to commit, and we could use. Gitignore to let git ignore some files and folders, as follows:

First we're going to create a. gitignore file but under Windows We can't create a file without a file name directly. We need to create it with a Linux command:

VI. Gitignore

Then: Wq Save the file, then open with the editor, enter the folder you want to ignore, for my project, as follows:

1 node_modules/2 build/

That is, I do not want to upload grunt loaded packages and build files.

Summary: Using the Grunt management project there are a lot of tall skills, here I only introduce some simple usage.

　　

Manage your static engineering with grunt