How to Use grunt to package JavaScript and CSS programs, gruntcss

How to Use grunt to package JavaScript and CSS programs, gruntcss

Maven in the Java World provides powerful package dependency management and build lifecycle management. In the JavaScript world, with the popularity of Node. js, JavaScript native build tools have become possible.

Grunt. js is an automatic task runner based on Node. js. Grunt. js, combined with NPM package dependency management, is comparable to Maven. Grunt. js is a natural fit for front-end application construction-not limited to JavaScript projects, it can also be used for application construction in other languages. More and more JavaScript projects are using Grunt. The largest users include the famous jQuery project.

Grunt's ecosystem is growing rapidly, and hundreds of plug-ins have been released on NPM. At the same time, anyone can easily publish their own plug-ins to NPM for others to use.

Grunt does not emphasize the build lifecycle as Maven does. The execution sequence of various tasks can be configured at will. Grunt itself is only an executor, and a large number of features are stored in NPM management plug-ins. The core plug-ins starting with grunt-contrib-cover most of the core functions, such as handlebars, jade, less, compass, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify, etc.

Grunt greatly reduces the entry threshold by providing common interfaces for code specification testing (Lint), merging, compression, testing, and version control tasks.

1. Install nodejs, grunt, and grunt plug-ins
1. Install nodejs
: Https://nodejs.org/download/

2. Install grunt and plug-ins.

Npm install grunt-g // install grunt,-g global variable npm install grunt-cli-g // install grunt command line npm install grunt -- save-dev // install grunt, -- save-dev save to the installation directory npm install grunt-cli -- save-dev // install the grunt command line npm install grunt-contrib-jshint -- save-dev // js syntax detection plug-in npm install grunt-contrib-concat -- save-dev // js merge plugin npm install grunt-contrib-uglify -- save-dev // js compression plugin npm install grunt-contrib-cssmin -- save-dev // CSS compression plug-in

Install grunt, grunt-cli,-g, and -- save-dev. We recommend that you avoid errors.
3. Create a working directory
After the above installation is complete, node_modules contains the plug-in installed above. copy node_modules from the nodejs installation directory to the new directory and create Gruntfile. js, package. json,
Note that Gruntfile. js and package. json must be in the same directory as node_modules. Otherwise, an error will be reported when the grunt plug-in is called. For example:

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?Warning: Task "uglify" not found. Use --force to continue.

This error is also reported if you have not installed the grunt-contrib-uglify plug-in.

2. Create Gruntfile. js and package. json
1. package. json

{"Name": "jstest", "file": "function", "version": "0.1.0", "devDependencies": {"grunt ":"~ 0.4.5 "," grunt-contrib-jshint ":"~ 0.11.3 ", // The number following it is the version number. You can find" grunt-contrib-concat ":" ~ from package. json under each plug-in directory ":"~ 0.5.1 "," grunt-contrib-uglify ":"~ 0.9.2 "," grunt-contrib-cssmin ":"~ 0.14.0 "}}

2. Gruntfile. js

Module. exports = function (grunt) {// configure grunt. initConfig ({pkg: grunt. file. readJSON ('package. json '), concat: {options: {separator:'; '}, dist: {src: ['js _ s/function. js', 'js _ s/jquery. validate. js'], dest: 'js _ d/main. js' // merge without compression}, uglify: {options: {banner :'/*! <% = Pkg. name %> <% = grunt. template. today ("yyyy-mm-dd") %> */\ n' // comment on the top of the file, which can be customized}, build: {// package. in json, compress the file and rename src: 'js _ s/<% = pkg. file %>. js', // note space. The official configuration example is pkg. name dest: 'js _ d/<% = pkg. file %>. min. js '// note the space. The official configuration example is pkg. name}, buildall: {// compress all js files in the js_s folder and put them in the js_d folder. files: [{expand: true, cwd: 'js _ s', // src: '**/* under the js directory :'**/*. js', // All js files dest: 'js _ d' // output to this directory}]}, hebin: {// function. js and jquery. validate. js, merge, and compress into main. min. js files: {'js _ d/main. min. js': ['js _ s/function. js', 'js _ s/jquery. validate. js'] }}, ymain: {// set main. javascript is compressed into main1.min. js src: 'js _ d/main. js', dest: 'js _ d/main1.min. js' }}, jshint: {// check, function. is there a syntax error in JavaScript? all: ['js _ s/function. js ']}, cssmin: {combine: {files: {// combine the css file in the css_s folder into a 'css _ d/main.css ': ['css _ s /*. css '] }}, minify: {options: {keepSpecialComments: 0,/* Delete all comments */banner:'/* minified css file */'}, files: {// compress a single CSS file 'css _ d/index.min.css ': ['css _ s/index.css']}, test: {// press all css files in the folder, after compression, put it in the new folder. The file name remains unchanged. files: [{expand: true, cwd: 'css _ s', // src: '**/* in the css directory :'**/*. css ', // All css files dest: 'css _ d' // output to this directory}]}); // load the grins grunt. loadNpmTasks ('grunt-contrib-uglify '); grunt. loadNpmTasks ('grunt-contrib-concat'); grunt. loadNpmTasks ('grunt-contrib-jshint'); grunt. loadNpmTasks ('grunt-contrib-cssmin'); // whether to call the plug-in function // grunt. registerTask ('default', ['concat', 'uglify ', 'jshint', 'cssmin']); // grunt. registerTask ('default', ['uglify ']); // grunt. registerTask ('default', ['concat']); // grunt. registerTask ('default', ['jshint']); grunt. registerTask ('default', ['cssmin']); // functions of the cssmin plug-in can be used, and other functions do not work}

After the configuration file is ready, enter grunt in the command line to merge and compress the file. The above test files are basically centered around, merged and compressed. This is important for WEB Front-end users.
In terms of the compression effect, the compression effect of JS is ideal. CSS is average. Of course, the code written here is related.

Articles you may be interested in:

• Using GruntJS to build Web programs and compress them together
• Using GruntJS to build Web programs
• Installing a Web program using GruntJS
• Detailed description of how to use GruntJS to link and compress multiple JavaScript files
• Use Grunt. js to manage your project application instructions