Home > Developer > Web Develop
Good text original address: http://segmentfault.com/a/1190000000354555
This article will first describe grunt-markdown how plug-ins work with HTML templates, and then I'll show you how to use grunt-watch plug-ins to elevate productivity to a new level. If you are unfamiliar with Gruntjs, please read my article on Gruntjs first.
Today's sample code can be obtained from github:day7-gruntjs-livereload-example.
Mate template using Gruntjs's markdown pluginIn my last Gruntjs article, I mentioned that we could grunt-markdown convert the markdown document into an HTML document through a plugin. To make the blog page look good, I decided to use the Twitter bootstrap style. This requires that we specify grunt-markdown the HTML template that the plugin will use, which is easy, and we only need to specify template configuration options.
markdown: { all: { files: [ { expand: true, src: ‘*.md‘, dest: ‘docs/html/‘, ext: ‘.html‘ } ], options: { template: ‘templates/index.html‘, markdownOptions: { gfm: true, codeLines: { before: ‘<span>‘, after: ‘</span>‘ } } } } },
template/index.htmlIt seems to be roughly the case:
<! DOCTYPE html><Html><Head><Title>learn Technologies in</Title><MetaName="Viewport"Content="Width=device-width, initial-scale=1.0" ><LinkRel="Stylesheet"Type="Text/css"href=".. /.. /css/bootstrap.css "Media="Screen" ><StyleType="Text/css" > Body{Padding-top:60px;Padding-bottom: 60px;}</Style></Head><Body><Divclass="NavBar navbar-inverse navbar-fixed-top" ><Divclass="Container" ><Divclass="Navbar-header" ><buttonType="Button"class="Navbar-toggle"data-toggle="Collapse"data-target=". Navbar-collapse" ><Spanclass="Icon-bar" ></Span><Spanclass="Icon-bar" ></Span><Spanclass="Icon-bar" ></Span></Button><Aclass= "Navbar-brand" href= "#" >30 Technologies in Days</a> </< Span class= "Hljs-title" >div> </div> </div> < div id= "main" class=" container "> < %=content%> </div></body></html> <%=content%>will be replaced by the HTML document Markdown.
Once you run the grunt command again, we can see the generated HTML 5 document.
grunt
The generated HTML 5 document is located docs/html under the folder.
grunt-contrib-watchis one of the most important plugins of Gruntjs. This plugin can be run in the background, monitoring the configuration of the file changes. Install the plugin using the following NPM command grunt-contrib-watch .
install grunt-contrib-watch --save-dev
The above command will update package.json the dependencies in.
{ "name ": " blog "," version": "0.0.0", " Description ": " My Awesome blog "," Devdependencies ": {" grunt ": "~0.4.1", "grunt-contrib-uglify": < Span class= "hljs-string" > "~0.2.5", "grunt-markdown": "~0.4.0", "grunt-contrib-watch": "~0.5.3"}} As with other plugins, the next task is to Gruntfile.js configure the plug-in in, and we need to add the following code to the Grunt initConfig method. These codes ensure that once the file changes, the grunt will run uglify and the markdown task
watch :{ scripts :{ files : [‘js/app.js‘,‘*.md‘,‘css/*.css‘], tasks : [‘uglify‘,‘markdown‘] } }
Add a task by adding the following line to Gruntfile watch .
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
Run grunt watch the command to invoke the Grunt watch task.
$ grunt watchRunning "watch" taskWaiting...
Now let's modify the js file under the folder app.js . Add the following function to the app.js .
function goodNight(name){ return "Good Night, " + name;}
Once we have added this function, the Grunt Watch task will run concurrently uglify with the markdown task.
$ grunt WatchRunning"Watch" taskWaiting ...Ok>>File"Js/app.js" changed.Running"Uglify:build" (uglify) taskFile "Js/app.min.js" created. running "Markdown:all" (markdown) task file "docs/html/day1.html" Created. Done, without errors. completed in 0.580s at sun nov 03 Span class= "Hljs-number" >2013 00: 15:54 GMT+ 0530 (ist)-Waiting ... To ensure that the changes have been added, we review the updated app.min.js files.
function hello(a){return"Hello, "+a+"! How are you?"}function bye(a){return"Bye, "+a}function goodNight(a){return"Good Night, "+a}
Similarly, if we modify the Markdown file, the new HTML document will also be created.
Using LivereloadOne of the features of Gruntjs is that it can automatically reload changes. This is useful, for example, if we change the style, we can see the change without clicking on the browser's refresh button. You watch can use the online reload by modifying the configuration of the plugin.
watch :{ scripts :{ files : [‘js/app.js‘,‘*.md‘,‘css/*.css‘], tasks : [‘uglify‘,‘markdown‘], options : { livereload : true } } }
This will start the service at http://localhost:35729/. We can also modify the port number:
watch :{ scripts :{ files : [‘js/app.js‘,‘*.md‘,‘css/*.css‘], tasks : [‘uglify‘,‘markdown‘], options : { livereload : 9090, } } }
Restart the server and now have access to the http://localhost:9090/
In order to enable online overloading, we need to add the following to the templates/index.html file.
<script src="http://localhost:9090/livereload.js"></script>
Restart the server, modify the bootstrap.css
.navbar-inverse { background-color: #222222; border-color: #080808;}
Change into
.navbar-inverse { background-color: red; border-color: #080808;}
We'll be able to docs/html/day1.html see the change in the middle.
Https://www.openshift.com/sites/default/files/images/livereloading-in-action.png
It's here today. Please continue to feedback.
Good literature recommended series--------(3) Gruntjs on-line reload boosts productivity to new heights
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
