Preliminary study on Grunt.js

Package.js

{  "Name": "Ttd_v3",  "Version": "0.1.0",  "Author": "Liujin",  "Devdependencies": {    "Connect-livereload": "^0.5.2",    "Grunt": "~0.4.2",    "Grunt-contrib-concat": "~0.3.0",    "Grunt-contrib-connect": "^0.7.1",    "Grunt-contrib-cssmin": "^0.11.0",    "Grunt-contrib-jshint": "~0.6.0",    "Grunt-contrib-sass": "~0.3.0",    "Grunt-contrib-uglify": "~0.3.2",    "Grunt-contrib-watch": "^0.6.1",    "Grunt-css": "~0.5.4",    "Grunt-sass": "0.6.1"  }}

Gruntfile.js

Module.exports =function(grunt) {//Livereload The default port number, you can also change to the port number you want    varLrport = 35729; //using the Connect-livereload module, generate a script with Livereload    //<script src= "http://127.0.0.1:35729/livereload.js?snipver=1" type= "Text/javascript" ></script>     varLrsnippet = require (' Connect-livereload ')) ({port:lrport}); //with middleware (middleware), you must close the Livereload browser plugin    varLrmiddleware =function(Connect, options) {return [            //inject the script into the static fileLrsnippet,//path to the static file serverconnect.static (options.base),//Enable directory browsing (equivalent to directory browsing in IIS)connect.directory (options.base)];     }; //project configuration (Task configuration)Grunt.initconfig ({//read our project configuration and store it in the Pkg propertyPkg:grunt.file.readJSON (' Package.json '),        //create a static server with the Connect taskConnect: {options: {//Server port numberport:8000,                //server address (can use host name localhost, also can use IP)Hostname: ' localhost ',                //physical path (the default is. That is, the root directory) Note: use '. ' or ' ... ' 403 Forbidden may be returned as a path. The value is changed to a relative path such as:/grunt/reloard. Base: '. '}, Livereload: {options: {//let the page reload by livereload the script. Middleware:lrmiddleware}} },        //Monitor the file for changes through the watch taskWatch: {client: {//We don't need to configure additional tasks, the watch task has been built into the Livereload browser refresh code snippet. options: {livereload:lrport},//' * * ' means to include all subdirectories                //' * ' means to include all filesFiles: [' html/*.html ', ' css/*.css ', ' js/*.js ', ' images/**/* ']}, Sass: {files: [' sass/*. {Scss,sass} ', ' sass/*. {Scss,sass} '], tasks: [' Sass:dist ']}}, Concat: {webqq: {files: {' Dist/js/test.js ': [' js/a.js ', ' js/b.js ']}}, Uglify: {options: {banner :'/** \ <%= pkg.name%> \ n * author:<%= pkg.author%> \ n * update:<%= new Date ()%> \n**/\n '}, Webqq: {files: {' Dist/js/test.min.js ': [' dist/js/test.js ']}}, Cssmin: {options: {banner :'/** \ <%= pkg.name%> \ n * author:<%= pkg.author%> \ n * update:<%= new Date ()%> \n**/'}, Cssmini: {files: {' Dist/css/test.min.css ': [' css/test.css ']//Compress test.css Files}}} , Sass: {dist: {files: {' Dist/css/test.css ': ' Sass/test.scss '            }          }        }    }); //grunt.initconfig Configuration Complete     //monitoring HTML JS CSSGrunt.loadnpmtasks (' Grunt-contrib-connect '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.registertask (' Live ', [' Connect ', ' watch ', ' concat ', ' uglify ']); //Merge Compression jsGrunt.loadnpmtasks (' Grunt-contrib-concat ');//Merge TasksGrunt.loadnpmtasks (' grunt-contrib-uglify ');//JS CompressionGrunt.registertask (' Jsmini ', [' cssmin ']); //Compress CSSGrunt.loadnpmtasks (' Grunt-css '); Grunt.registertask (' Cssmini ', [' cssmin ']); //Compiling sassGrunt.registertask (' Sassmini ', [' sass:dist ', ' watch ']); Grunt.loadnpmtasks (' Grunt-sass '); Grunt.loadnpmtasks (' Grunt-contrib-watch ');};

Preliminary study on Grunt.js