A further exploration of Butterfly.js-grunt.js (I.)

A further exploration of Butterfly.js-grunt.js (I.)Artifact Grunt.js

grunt.jsI have always been the first to learn the grunt.js famous name todo List . Take advantage of the advent of the Spring Festival (soy sauce day), to fill out this pit, finished this wish.

grunt.jsPowerful, powerful in that it has a lot of useful plug-ins, and the linkage between different plug-ins to achieve a more powerful function.

Here the default is that everyone has installed npm npm install and will use the instructions, not detailed. The following is the use grunt-contrib-watch and implementation of the grunt-contrib-connect change code to automatically refresh the browser, instead of manually press F5 or ctrl+R to refresh the browser. will also apply this cool test function to butterfly.js the application development.

Grunt-contrib-watch

Grunt-contrib-watch, this plug-in super powerful, basically, I see grunt.js the application development, no one does not need to grunt-contrib-watch . The function is: to monitor the changes of the specified file include: html、css、js when the specified file has changed (after saving), it will be triggered task .

Grunt-contrib-connect

Grunt-contrib-connect, above the document, it defines itself as one connect web server , so this is a plugin that can create a server.

Positive

Create a catalog of our projects:

myproject  ┣app    ┣butterfly    ┗main      ┣theme.css      ┣index.html      ┗index.js  ┣package.json  ┗Gruntfile.js

package.jsoncan be used npm init to create or create a file yourself. This belongs npm to the foundation, does not understand oneself wall. Execute the following code at the command line:

npm install grunt --save-devnpm install grunt-contrib-connect --save-devnpm install grunt-contrib-watch --save-dev

Above --save-dev is two root -- , do not know why was swallowed a root, these three lines of code, respectively installed grunt , grunt-contrib-connect , grunt-contrib-watch .

Edit Gruntfile.js , this file is Grunt.js the core, all the Grunt.js tasks performed here are controlled here, Grunt.js the original state should be this:

module.exports = function(grunt){    pkg: grunt.file.readJSON(‘package.json‘),    grunt.initConfig({        //...    });}

Set up the connect module first:

connect: {    options: {        port: 9000,        hostname: ‘localhost‘,        livereload: 35729    },    server: {        options: {            open: {target:‘http://localhost:9000/main/index.html‘},            base: [‘app‘]        }    }}

To set up the watch module again:

watch: {    livereload: {        options: {            livereload: true        },        files: [‘app/main/index.html‘,‘app/main/theme.css‘, ‘app/main/index.js‘]    }}

Last settask

  module.exports = function (grunt) {Pkg:grunt.file.readJSON (' Package.json '), Grunt.initconfig ({con Nect: {options: {port:9000, hostname: ' localhost ', livereload: 35729}, Server: {options: {open: {target: ' http://localhost:9000 /main/index.html '}, Base: [' App '}}}, watch: {li Vereload: {options: {livereload:true}, files: [' App/ma    In/index.html ', ' app/main/theme.css ', ' app/main/index.js ']//monitoring file List}});    Grunt.loadnpmtasks (' Grunt-contrib-connect ');    Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.registertask (' Default ', [' connect:server ', ' Watch '])}  

After editing is complete, at the command line input grunt , grunt.js by grunt-contrib-connect Creating a server localhost:9000 (domain name and port in the options settings), after executing the command, you will find that the browser opens automatically http://localhost:9000/main/index.html . If there is no error, even if it is done. You can change index.html theme.css it, or index.js . very good. We've liberated the F5 button.

In fact, this is just grunt.js a small function, grunt.js strong, here first dig a pit, follow-up and you share grunt.js the other modules and more detailed Gruntfile.js configuration

A further exploration of Butterfly.js-grunt.js (I.)