Use Grunt to merge and compress JS, CSS files

What you need to know:1, nodejs installation and command line use 2, Nodejs installation Application 3, Grunt preliminary understanding

This article has assumed that readers are already familiar with the above knowledge.

OK, let's continue:

Task 1: Merge and compress all zepto and plugins under SRC directory.

--src/    ajax.js    assets.js    callbacks.js    data.js    deferred.js    detect.js    event.js    form.js    fx.js    fx_methods.js    gesture.js    ie.js    ios3.js    selector.js    Stack.js    touch.js    zepto.js

Directory structure:

dist/node_modules/src/Gruntfile.jspackage.json

Package.json is dependent on the library file

Gruntfile.js is the procedure for performing procedures

First, JS merge compression

The first time you need to install grunt. Perform the npm install-g grunt-cli installation. If it is already installed, it can be ignored.

1.package.json file

{  "Name": "Demo",  "File": "Zepto",  "Version": "0.1.0",  "description": "Demo",  "License": "MIT",  "Devdependencies": {    "Grunt": "~0.4.1",    "Grunt-contrib-jshint": "~0.6.3",    "Grunt-contrib-concat": "~0.5.0",    "Grunt-contrib-uglify": "~0.2.1",    "Grunt-contrib-requirejs": "~0.4.1",    "Grunt-contrib-copy": "~0.4.1",    "Grunt-contrib-clean": "~0.5.0",    "Grunt-strip": "~0.2.1"  },  "Dependencies": {    "Express": "3.x"  }}

2.gruntfile.js

Module.exports =function(Grunt) {grunt.initconfig {concat: {options: {}, dist: {src: [' Src/**/*.js '],//All files under sub-folders are included under the SRC folderDest: ' Dist/built.js '//merge files under dist named Built.js}}, Uglify: {build: {src:' Dist/built.js ',//The compressed source file is a previously merged buildt.js fileDest: ' Dist/built.min.js '//compressed file is Built.min.js      }   }}); Grunt.loadnpmtasks (' Grunt-contrib-uglify '); Grunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.registertask (' Default ', [' concat ', ' uglify ']);}

To perform the steps:

(1) Installation dependency, installed can be ignored: npm install. The dependent files will be downloaded to the Node_modules directory.

(2) Performing merge compression: grunt

>"concat:dist"  (concat) taskfile Dist/"  Uglify:build ""dist/built.min.js" created. Done, without errors.

will be generated in the Dist directory

Built.jsbuilt.min.js

Task 2: Merge all the CSS files in the Src/css directory and compress them.

Second, the CSS to merge compression

Need to install GRUNT-CSS. Perform the npm install grunt-css installation. The installation was successful and downloaded to node_modules/grunt-css . If it is already installed, it can be ignored.

1, Package.json ibid.

2, gruntfile.js as follows:

Module.exports =function(Grunt) {grunt.initconfig ({concat: {//css File Mergingcss: {src: [' Src/css/*.css '],//all CSS files under the Src/css directory under the path in the current grunt projectDest: ' Dist/all.css '//generated under the Dist folder under the Grunt project path is All.css}}, Cssmin: {//CSS File Compressioncss: {src:' Dist/all.css ',//put the previous all.cssDest: ' Dist/all.min.css '//Compression}}); Grunt.loadnpmtasks (' Grunt-css '); Grunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.registertask (' Default ', [' concat ', ' cssmin ']);}

Reference:

1, grunt Chinese network

http://www.gruntjs.net/getting-started

End

Use Grunt to merge and compress JS, CSS files