Shulou(Shulou.com)06/03 Report--

introduction

As one is preparing to go from java backend to big frontend, have been thinking, in js world inside there is not something similar to maven or gradle.. And then I found grunt.

What is Grunt for?

Such as ant,maven,gradle,make stream, then why do we want to learn such a tool, we use IDE programming is not good, to let people learn such a tool, then there must be this tool can do for us what reason.

Select Grunt Reason

Managing our files relies on arbitrary batch processing tasks integrating common front-end tools,js obfuscation, file merge compression.

Having said that, that's why we chose grunt.js as our project build tool. If you don't have any project build concepts, I suggest you don't read anything about grunt, including this article. Because you cann't read me I'm going to write, and you cann't read anything about grunt, so don't waste your time.

Put Grunt to work.

If you've had access to build tools before, or if you have the concept of project construction now, then the concept of tasks shouldn't be too difficult to understand.

Create our first mission

Just write these words in our Gruntfile.js file

module.exports = function (grunt) {grunt.registerTask('test', 'my first tasks', function () {grunt.log.write('Hello World! ').ok(); });}

Then we just run grunt test in the current directory

you can see the console output.

Hello World.

Then we have a node environment and we can do whatever we want.. Stop! If that's all, what's the difference between writing a shell script? In fact grunt is no different from shell scripts, but grunt has a node running environment, which can be simpler than writing shell scripts. If you are already a shell script expert, I don't think it is necessary to learn grunt again.

Mission of the mission

Sometimes we have a lot of tasks, but in this case tasks can be classified as one, we need to register a multitask to handle this situation, for example, file operations such as create, open, rename, these tasks can be classified as file operations tasks

module.exports = function (grunt) { grunt.initConfig({ file: { create: 'source file', open: 'open file', delete: 'delete file'}}); grunt.registerMultiTask('file', 'Log stuff. ', function () {grunt.log.writeln(this.target + ': ' + this.data); });}

At this point, when we run, we will see the following interface

grunt file:create

create: 'source file'

grunt file:open

open: 'open file'

grunt file:delete

delete: 'delete file'

So when we customize multitasking, we can get the current task command through this.target, and then get our configuration value through this.data, and then it's time to use your imagination.

summary

In fact grunt isn't magical, it's just a command-line tool that runs in node and makes it easy for us to write scripts in js.

plug-in recommended grunt-contrib-watch listening file modification grunt-curl want curl download remote jsgrunt-contrib-clean file cleaning tool grunt-contrib-cssmincss compression tool grunt-contrib-copy file complex tool generated by haroopad

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.