Grunt has recently been used to promote projects. The specific steps of the operation of the principle of a lot of details, but the process of trying or encountered many pits. Now write your own installation process

  1. Install nodejs. sudo apt-get install nodejs

  2. NPM install -g grunt-cli NPM install -g grunt-cli NPM install -g grunt-cli

  3. Create a grunt folder (mkdir grunt), enter this folder, run NPM init, generate package.json file (note: the configured name value cannot be the same as the folder).

  4. NPM install grunt –save-dev, npm install grunt-contrib-concat grunt-contrib-clean grunt-contrib-copy grunt-contrib-cssmin grunt-contrib-imagemin Grunt-contrib-uglify grunt-rev grunt-usemin –save-dev (Merge, Remove, Copy, Compression, Image Compression, JS Compression, Modify file name, Modify HTML page reference path)

  5. Create a new gruntfile.js, write the configuration js and run it.

Here’s how to write gruntfile.js in conjunction with my own project. My project structure: public folder + templates

First, copy public and templates to your Grunt installation directory

My needs are: Merge public CSS into one build. CSS, public JS into one build.js, and then compress all public files, and change the MD5 name of the file, and change the corresponding reference in the HTML page and CSS and JS. Finally, create the public and templates folders in the dist directory. This way, you can simply replace the two folders on the server directly. In your local development environment, it will still be the development file gruntfile.js:

Module. exports = function(grunt) {grunt.config.init({// clean: {HTML: {SRC: "dist/"}, js: {// clear the merged js SRC from the copied js file: [ 'dist/public/js/zepto.min.js', 'dist/public/js/des3.js', 'dist/public/js/pako.js', 'dist/public/js/public.js' ] }, css: { src: [ 'dist/public/css/WebApp_reset.css', 'dist/public/css/public.css', 'dist/public/css/main_msg.css' ] } }, // Concat: {options: {separator: '; ', }, js: { src: [ 'public/js/zepto.min.js', 'public/js/des3.js', 'public/js/pako.js', 'public/js/public.js' ], dest: 'dist/public/js/build.js' }, css: { src: [ 'public/css/WebApp_reset.css', 'public/css/public.css', 'public/css/main_msg.css' ], dest: 'dist/public/CSS/build. CSS'}}, / / to replace useminPrepare: {HTML: 'templates / *. HTML, options: {dest: 'dist/templates'}}, // Replace all MD5 filenames and merge resource tags usemin: {CSS: 'dist/public/ CSS /*.css', js: 'dist/public/js/*.js', HTML: 'dist/templates/*.html', options: { assetsDirs: ['dist/public/**'], patterns: { js: / / / / / \ \ / images / -] [\ / \ w + \. PNG) /, 'replace image in js'] / / most of them are the online, Actually does not replace the img path in the js/(img \ [^ '"'] *? \. (: | jpeg | GIF JPG | PNG | webp | SVG | ico))/gm, // Replace image in js]}, blockReplacements: {// Rewrite the link TAB, add the "/" end CSS: function(block) { return '<link rel="stylesheet" href="' + block.dest + '"/>'; }}}}, // compression js uglify: {generated: {expand: true, // relative path CWD: 'dist/public/js', SRC: '*.js', dest: 'dist/public/js/'}}, // Copy JS and HTML files to "production environment" Copy: {HTML: {Flatten: true, expand: true, SRC: 'templates/*.html', dest: 'dist/templates' }, js: { flatten: true, expand: true, src: 'public/js/*.js', dest: 'dist/public/js/' }, css: { flatten: true, expand: true, src: 'public/css/*.css', dest: CWD: 'dist/public/ CSS /', SRC: {generated: {expand: true, CWD: 'dist/public/ CSS /', SRC: CSS, dest: 'dist/public/ CSS /'}}, // Imagemin: {start: {options: {OptimizationLevel: }, files: [{expand: true, CWD: 'public/img/', SRC: / [' * * *. {PNG, JPG, jpeg} '], / / optimization img directory all PNG jpeg/JPG/dest: + MD5 rev: {options: {encoding: 'utf8', algorithm: MD5 rev: {options: {encoding: 'utf8', algorithm: 'md5', length: 8 }, assets: { files: [{ src: [ 'dist/public/img/*.{jpg,jpeg,gif,png}', 'dist/public/css/*.css', 'dist/public/js/**/*.js' ] }] } }, }); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-usemin'); grunt.loadNpmTasks('grunt-rev'); Grunt.registerTask ('default', ['clean: HTML ', 'concat', ['copy'], ['copy'], ['copy']) }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} // clean the merged js 'clean: CSS ', // clean the merged CSS 'rev', // add MD5 'usemin' to dist // replace the reference address in HTML); } 'grunt.registerTask()' is the order in which my project is packaged. Finally, enter 'grunt' from the current command line to execute the configuration in 'gruntfile'.

Some problems encountered:

  1. Ubuntu has a nodejs NPM package that has nothing to do with nodejs. It is possible that the installation node has installed the NPM package, which has nothing to do with nodejs, so Grunt will not work. Sudo SPT -get remove node

  2. The link tag generated by usemin does not have a/end tag, so you need to manually write the tag generation rules. See the usemin configuration in gruntfile.js

  3. Alternative resource writing rules for HTML pages:



Multiple files that need to be merged will need to be written in the order specified in the grungfile configuration. Any other single file that needs to be modified to MD5 or compressed will need a build. The block parameter in the second configuration above is the build field