Gruntjs Development Instance

Gruntjs Development Instance
Grunt is a Node. js-based project build tool. It can automatically run the tasks you set, such as compiling less, sass, compressing js files, and splicing files. (1) install the nodejs environment. Grunt 0.4.x requires Node. js version> = 0.8.0. If you have installed nodejs, run node-v in the command line to view your Node. js version. if the version is not enough, reinstall and overwrite the old version. (2) If your company uses a proxy to access the Internet, first run the command npm set proxy = IP address, and then run the command npm install-g grunt-cli to implant grunt into your system, in this way, you can run it from any directory (locate to any directory and run the grunt command). Installing grunt-cli does not mean installing the grunt task runner! Grunt CLI is easy: Call Grunt to run the installed version in the directory where Gruntfile is located. This means that you can install multiple Grunt versions on the same machine at the same time (3) Running gruntjs relies on package. json and Gruntfile. js file configuration, create the two files in the root directory of your project, the format is as follows: (1) package. json is written into the Grunt version and Grunt plug-in that your project depends on. For example: "name": "pcauto", "version": "0.1.0", "devDependencies ": {"grunt ":"~ 0.4.5 "," grunt-contrib-less ":"~ 0.11.4 "," grunt-contrib-watch ":"~ 0.6.0 "}}name: Project name, version: version number of the project (all of which are random), devDependencies: Set the grunt version number and each plug-in (: version number, you can view the related names and versions on the official website.) For more plug-ins, see (2) shift + Right-click the root directory of the project and open the command line here, npm install automatically generates a node_modules folder in the root directory, which is the grunt plug-in you need. In this step, the grunt version and plug-in have been installed. The next step is to configure Gruntfile. js (3) configure the workflow Gruntfile. js module. exports = function (grunt) {// Project configuration. grunt. initConfig ({pkg: grunt. file. readJSON ('package. json '), less: {dev: {fil Es: {'css/index.css ': 'Less/index. less ', 'css/page.css': 'Less/page. less '}}, watch: {less: {files: ['less /*. less '], tasks: ['less'] }}); // load the plug-in containing the "uglify" task. Grunt. loadNpmTasks ('grunt-contrib-less '); grunt. loadNpmTasks ('grunt-contrib-watch'); // The list of tasks executed by default. Grunt. registerTask ('default', ['less ', 'Watch']) ;}; [1] pkg: grunt. file. readJSON ('package. json ') is to import the configured json data to the Grunt configuration. [2] the plug-in calls the configuration less: {dev: {files: {'css/index.css ': 'Less/index. less ', 'css/page.css': 'Less/page. less '}}} manual configuration: Call the configuration. In less, a task named dev (custom, required) is specified, and multi-file processing is executed. The format is files: {'xxxx output css file path and file name': 'xxx your less file', 'xxxxx': 'xxxxx'} automatic matching mode less: {dev: {files: [{expand: true, cwd: 'Less /', Src :['*. less '], dest: 'css/', ext: '.css, here is a good plug-in watch that monitors all the less files in the less folder in real time (for example, in the watch task, once the code changes, the less compilation task is automatically executed, and the grunt command line does not need to be run every time. Note: you only need to run the grunt command line once, and then do not close the window to keep it open, for example .) [3] load the task plug-in grunt. loadNpmTasks ('grunt-contrib-less '); grunt. loadNpmTasks ('grunt-contrib-Watch'); [4] defines the list of executed tasks. registerTask ('default', ['less ', 'watch']); (default task, if your name is grunt. registerTask ('yong ', ['less', 'watch']), run the command line grunt yong in the next step, the next step is to run (4) shift + Right-click the root directory of the project-> open the command line here. In the past, grunt compiled less, compressed files, and combined files, they all need to use different tools to execute tasks one by one, with low efficiency. Now Grunt is available and everything is automated. Add a configuration example for reference only: package. json {"name": "pcauto", "version": "0.1.0", "devDependencies": {"grunt ":"~ 0.4.5 "," grunt-contrib-less ":"~ 1.0.0 "," grunt-contrib-uglify ":"~ 0.7.0 "," grunt-contrib-imagemin ":"~ 0.9.0 "," grunt-contrib-cssmin ":"~ 0.7.0 "," grunt-contrib-watch ":"~ 0.6.0 "}} Gruntfile. js module. exports = function (grunt) {// Project configuration. grunt. initConfig ({pkg: grunt. file. readJSON ('package. json '), // less is compiled into css less: {dev: {files: [{expand: true, cwd: 'src/less/', src :['*. less '], dest: 'src/css/', ext: '.css '}] }}, // css File compression cssmin: {dev: {files: [{expand: true, cwd: 'src/css/', src :['*. css ','! * .Min.css '], dest: 'css/', ext: '.min.css '}] }}, // compress the js file uglify: {options: {banner :'/*! <% = Pkg. name %> <% = grunt. template. today ("yyyy-mm-dd hh: mm") %> */\ n'}, dev: {files: [{expand: true, cwd: 'src/js/', src :'*. js', dest: 'js/', ext :'. min. js'}] }}, // image Compression imagemin: {dev: {files: [{expand: true, cwd: 'src/image/', src :['*. {png, jpg} '], dest: 'image/'}] }}, // Real-time Monitoring Task watch: {less: {files: ['src/less /*. less '], tasks: ['less']}, uglify: {files: ['src/js /*. js'], tasks: ['uglif']}, cssmi N: {files: ['src/css /*. css '], tasks: ['cssmin']}, imagemin: {files: ['src/image /*. {png, jpg} '], tasks: ['imagemin'] }}); // load the plug-in containing the "uglify" task. Grunt. loadNpmTasks ('grunt-contrib-less '); grunt. loadNpmTasks ('grunt-contrib-Watch'); grunt. loadNpmTasks ('grunt-contrib-uglify '); grunt. loadNpmTasks ('grunt-contrib-cssmin'); grunt. loadNpmTasks ('grunt-contrib-imagemin'); // the default list of tasks to be executed. Grunt. registerTask ('default', ['less ', 'cssmin', 'uglify', 'imagemin', 'watch']);};