[Grunt second play] 30 minutes to learn to use grunt to package front-end code (02)

Preface

In the previous blog, we briefly introduced how to use grunt. Some basic points are not covered. Today we need to look at some basic knowledge.

[Grunt first play] 30 minutes to learn to use grunt to package front-end code

Configure the task/grunt. initConfig

Previously, we briefly introduced grunt-related knowledge. here we need to familiarize ourselves with Gruntfile-related knowledge points, such as configuring tasks.

The grunt task configuration is specified in the grunt. initConfig method in Gruntfile. This configuration mainly includes some naming attributes.
For example, the merge and compression task configuration we used last time:

    my_property: 'whatever''foo/*.js', 'bar/*.js'

My_property can fully read the external json configuration file, which can be used in the preceding task configuration. For example, if the file to be compressed prevails or where to put it, you can configure it here.

When we use grunt, the main task is to configure a task or create a task. In fact, it is to register an event and trigger it. Therefore, the core of grunt is event registration.
Each time grunt is run, we can specify to run one or more tasks and decide what to do through the task. For example, we need to compress and merge at the same time, and perform code check.

grunt.registerTask('default', ['jshint','qunit','concat','uglify']);

When running a basic task, grunt does not search for the configuration and check the running environment. It only runs the specified task function and can pass the colon splitting parameter, for example:

grunt.registerTask('foo', 'A sample task that logs stuff.',  (arguments.length === 0.name + ", no args".name + ", " + arg1 + " " +

The running result is as follows:

$ grunt foo:testing:123"foo:testing:123"123"foo:testing""foo"

There is a multi-task scenario, that is, a task is actually the first to have multiple tasks, which is different at this time.

1,2,3'hello world''log','log stuff.', .target + ': ' + 

If we run the following code:

???????

In more cases, custom tasks are required in actual scenarios, while grunt. task. run ({}) is used in our tasks to run tasks.
The knowledge points here are explained in the following examples.

Grunt plug-in

Grunt is mainly used to learn how to use grunt plug-ins. So we will first learn several commonly used plug-ins today.

Grunt-contrib-unglify

We will still learn from simple examples

module.exports = 'dest/libs.min.js': ['src/zepto.js', 'src/underscoce.js''grunt-contrib-uglify'

In this way, zepto and other files in src will be packed in the lib. min. js of dest.

Compress all files in a folder

Then this code is very interesting. It will pack all js files in one file directory into another folder.

module.exports = 'src''**/*.js''dest''grunt-contrib-uglify'

If you want to add a annotative language to the header of your file to configure banner information

'Package. json ''/*! Comment */''dest/output. min. js': ['src/input. js'

Grunt-contrib-concat

This plug-in is mainly used for code merging and merging multiple files into one. Our previous uglify also provides some merge functions.
You can set the following attributes in the optional attributes:
① Separator is used to split the text of each file,
② The file header comment mentioned earlier by banner only appears once
③ The end information of the footer file appears only once
④ StripBanners remove source code comments (only clear/**/such comments)

A simple example:

Module. exports = '/* Split */''/* test */''/* footer */''src/zepto. js', 'src/underscore. js', 'src/backbone. js ''dist/built. js ''grunt-contrib-concat'

Merge three files into one, which makes sense during source code debugging.

Build two folders

Sometimes we may need to put the Merged Code into different files. This can be done in this case.

module.exports = 'src/zepto.js''dest/basic.js''src/underscore.js', 'src/backbone.js''dest/with_extras.js''grunt-contrib-concat'

This function is written as follows:

module.exports = 'dist/basic.js': ['src/test.js', 'src/zepto.js''dist/with_extras.js': ['src/underscore.js', 'src/backbone.js''grunt-contrib-concat'

The second method is easy to use the configuration file. You can select it. As for reading the configuration file, we will not pay attention to it here.

Grunt-contrib-jshint

This plug-in is used to detect js syntax issues in files. For example, I wrote test. js as follows:

Alert ('I am ye xiaohaid ')

module.exports = 'src/test.js''grunt-contrib-jshint'

The running result is:

"Jshint: all"/test. js... ERROR 'I'm ye xiaohaid ')

If I lack a semicolon, it seems that the BUG is missing... if I write an obvious BUG in it, an error will be reported.
Most of the time, we think that there is no semicolon, so we will ignore this error in the file:

'-W033': 'src/test.js'

Here is a slightly complex application, that is, we perform a check before merging, and then perform a check after merging. We can write

module.exports = 'src/test01.js', 'src/test02.js''dist/output.js''-W033': 'src/test01.js', 'src/test02.js''dist/output.js''grunt-contrib-concat''grunt-contrib-jshint'

"jshint:pre">> 2"concat:dist""dist/output.js""jshint:after">> 1 file lint free.

Three consecutive tasks are run here. Check and merge the tasks first, and then perform the check. I have written two simple files here. If jquery is involved, it seems that there are still many bugs ......
So we need to use it to customize some specifications. We are here for the time being, first go to the next plug-in for learning.

Grunt-contrib-requirejs

Our grunt package program is very likely to be used with requirejs, but after learning several plug-ins, it is the most troublesome to use requireJs. Because there are few online resources, it consumes a lot of energy to get this part.

At this time, you will sigh that it is not easy to program English well !!!

"path/to/base""path/to/config.js""path/to/almond",       out: "path/to/optimized.js"

The official example includes the following attributes:

BaseUrl indicates that all js files are relative to this directory.

MainConfigFile configuration file directory

Name ???

Out output file

We don't know much about some parameters. At this time, we can only use examples to solve this problem.

module.exports = "options""baseUrl": "./""paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""Test": "src/Test01""include""$""_""B""Test""out": "dest/libs.js"'grunt-contrib-requirejs'

After this configuration, the files in the include file will be packaged into the corresponding out file. paths itself is of little significance, that is, used to configure the point in the include

At this time, let's add a name to see if it works:

module.exports = "options""baseUrl": "./""name": 'src/test02.js'"paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""Test": "src/Test01""include""$""_""B""Test""out": "dest/libs.js"'grunt-contrib-requirejs'

In this way, the file corresponding to the name will be compressed to the top of the compressed file, but it is still unclear what it is, its English comment is a single file or its dependency optimization, I don't know what to optimize... Success !!!

"options""baseUrl": "./""paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""Test": "src/Test01""include""$""_""B""Test""out": "dest/libs.js"

Then, here we do not have the initConfig approach, directly use custom tasks

Module. exports = 'grunt-contrib-requirejs 'built', 'require demo', cfg = grunt. file. readJSON ('cfg. json '= 'requirejs' grunt. log. debug ('parameter: '+ grunt. task. run (['requirejs'

$ grunt build --"build""requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"","_":"src/underscore","B":"src/backbone","Test":"src/Test01"},"include":["$","","B","Test"],"out":"dest/libs.js""requirejs:test"-contrib->> Tracing dependencies : d:/grunt/dest/libs.js>> Uglifying file: d:/grunt/dest/libs.js>> d:/grunt/dest/libs.js>> ---------------->> d:/grunt/src/zepto.js>> d:/grunt/src/underscore.js>> d:/grunt/src/backbone.js>> d:/grunt/src/Test01.js

There are still some results. Finally, we will introduce the requireJS packaging template file.

Require and template file

We know that the template file is generally HTML, such as our demo01.html. How should we pack this file? It's actually quite simple ......

"requirejs""options""baseUrl": "./""paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""test": "src/test01""text": "src/require.text""include""$""_""B""test""text!src/demo01.html""out": "dest/libs.js"

So we successfully typed the Template

$ grunt build --"build""requirejs":{"test":{"options":{"baseUrl":"./","paths":{"$":"","_":"src/underscore","B":"src/backbone","test":"src/test01","text":""},"include":["$","_","B","test","text!src/demo01.html"],"out":"""requirejs:test"-contrib->> Tracing dependencies : d:/grunt/dest/libs.js>> Uglifying file: d:/grunt/dest/libs.js>> d:/grunt/dest/libs.js>> ---------------->> d:/grunt/src/zepto.js>> d:/grunt/src/underscore.js>> d:/grunt/src/backbone.js>> d:/grunt/src/test01.js>> d:/grunt/src/require.text.js>> text!src/demo01.html

In the file, we reference the following methods:

"Text! Src/demo01.html "=> 'specific file'

"name": "demo""version":         "0.1.0""description":     "demo""license":         "MIT""devDependencies""grunt":                   "~0.4.1""grunt-contrib-jshint":    "~0.6.3""grunt-contrib-concat":    "~0.3.0""grunt-contrib-uglify":    "~0.2.1""grunt-contrib-requirejs": "~0.4.1""grunt-contrib-copy":      "~0.4.1""grunt-contrib-clean":     "~0.5.0""grunt-strip":             "~0.2.1""grunt-contrib-watch": "~0.6.0""grunt-contrib-cssmin": "~0.5.0""dependencies""express": "3.x"

module.exports = 'dest/car.min.css'"src/car.css""src/car01.css"'grunt-contrib-cssmin'

In this way, we can compress and merge CSS files:

$ grunt cssmin --"cssmin:compress"-contrib-/car.min.css created.

Next episode notice

Today, we have learned some basic grunt package knowledge. Tomorrow we will start the following study to simply end this round of grunt-related knowledge.

1. Move the package file

Our development version and use version may not be in the same place.

2 branch processing

Package different branches

3 native package and HTML5 package

In the era when HTML5 is embedded into webview, we certainly have a packaging that requires both website files and app files.

4-channel Packaging

Of course, the package of sub-channels and sub-branches may exist.

Till now, To be continued ......