[Third play of grunt] Application of grunt in front-end real projects

Preface

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

After the previous two studies, we learned some basic knowledge about grunt packaging and got a preliminary understanding of compressing several files.

However, in actual projects, the application is often not that simple, because we have branches, and we also have the Html5 version of the app. What's more complicated is that we have various channels, different channels are developed by different teams.

How can a unified packaging tool meet the needs of different teams?

Then, we still need to package the code during local joint debugging, but sometimes we do not want minify for the packaged code. These functions are important for actual projects.

It is absolutely meaningful for us to make great efforts to learn the knowledge of grunt packing a piece. Otherwise, the problem of merging a piece of front-end code will not be broken, therefore, if you have the idea, you should master a set of front-end automation tools.

Let's continue learning for a few days !!!

Move package files

In fact, grunt itself has such a function, but this may happen in our actual project:

Our core framework will have a set of compressed code and generate files in the corresponding directory for publishing, but the permissions in this place are invisible to the teams of various channels.

Therefore, we should copy the file in the public folders of various channels. This code is actually very simple and can be implemented without any new knowledge:

We still use yesterday's require-related code here, but one difference is that we need to generate this file in the common folder of drive D at the same time.

This code is actually relatively simple. Here we first introduce a new plug-in copy

Grunt-contrib-copy

This plug-in is used to copy files to the desired folder.

'src/*.js''dest/'

This code will get the js file in src to dest and create a new src Folder:

"copy:main"7 files

If you do not want to copy a folder, as long as the file is as follows:

    expand: 'src/**.js''dest/'

After this is done, we will move the package file to disk D.

Move package files

At this time, the Code should be written in this way (maybe we want to destroy the items in the folder before moving it, and we will not consider it for the time being)

Module. exports = src: 'dest /**. js 'd:/common/''grunt-contrib-copy'' grunt-contrib-requirejs 'built', 'require demo', cfg = grunt. file. readJSON ('cfg. json '= 'requirejs' grunt. log. debug ('parameter: '+ grunt. task. run (['requirejs' 'default', 'test demo', ['built', 'copy'

Running "build""requirejs:test">> 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"copy:main"8 files

Here is a brief introduction to mobile-related knowledge points. Let's go to the next topic.

The file structure is as follows:

At this time, the best way to implement the function is to write a custom task. If other schemes are difficult to implement, the configuration file also needs to be modified at this time. For example, the path must contain parameter information.

"requirejs""options""baseUrl": "<%= config.srcDir %>""paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""test": "src/test01""text": "src/require.text""include""$""_""B""test""text!src/demo01.html""out": "<%= config.destDir %>/libs.js"

At this time, when initConfig is related, you must first input the path dependent file directory and the output file directory.

module.exports = 'grunt-contrib-requirejs'  grunt.registerTask('build', 'require demo',  path = '../' + channel + '/' + project +'path: ' +     cfg = grunt.file.readJSON(path + '/gruntCfg.json'='config'+ '/dest''requirejs'    grunt.log.debug('param: ' +    grunt.task.run(['requirejs''default', 'test demo', ['build', 'copy'

So we succeeded in the first step:

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

If you change the task command:

grunt build:gruntDemo:demo:01 --debug

It turns out that there is no problem, so I won't post it here. You should try it on your own. The processing of our branch is now here.

Channel Processing has actually been done here. The first parameter is the channel, the second parameter is the project, and the third parameter is the branch. Therefore, we will not talk about channel processing for the time being.

Native and HTML5 Packaging

Finally, let's take a look at how to package native files. native file packaging is similar to packaging HTML5, but we need a little bit of configuration here, so that a project can be packaged into different effects.

Taking demo01 as an example, the configuration file may need to be adjusted:

"requirejs""options""baseUrl": "<%= config.srcDir %>""paths""$": "src/zepto""_": "src/underscore""B": "src/backbone""test": "src/test01""text": "src/require.text""web""include""$""_""B""test""out": "<%= config.destDir %>/libs.js""app""include""$""_""B""test""text!src/demo01.html""out": "<%= config.destDir %>/libs_app.js"

In this way, we need to make some adjustments to our code:

module.exports = 'grunt-contrib-requirejs'  grunt.registerTask('build', 'require demo',  path = '../' + channel + '/' + project +'path: ' +     cfg = grunt.file.readJSON(path + '/gruntCfg.json'='config'+ '/dest''param: ' +'param: ' + cfg[type]['include' taskCfg ===='include'] = cfg[type]['include'='requirejs'    grunt.log.debug('param: ' +    grunt.task.run(['requirejs''default', 'test demo', ['build', 'copy'

So you can run it !!!

$ grunt build:app:gruntDemo:demo:01 --"build:app:gruntDemo:demo:01"/gruntDemo/"baseUrl":"<%= config.srcDir %>","paths":{"$":"src/zepto","_":"","B":"src/backbone","test":"src/test01","text":"src/require.text"},"":{"include":["$","_","B","test"],"out":"<%= config.destDir %>/libs.js"},"app""include":["$","_","B","test","text!src/demo01.html"],"out":""!src/demo01.html[D] param: {"config":{"srcDir":"../gruntDemo/demo01","destDir":""},"requirejs":{"main":{"options":{"baseUrl":"../gruntDemo/demo01","":{"$":"src/zepto","_":"src/underscore","B":"src/backbone","test":"src/test01""text":"src/require.text"},"include":["$","_","B","test","text!src/demo01.html""out":"../gruntDemo/demo01/dest/libs_app.js""requirejs:main"-contrib->> Tracing dependencies : d:/gruntDemo/demo01/dest/>> Uglifying file: d:/gruntDemo/demo01/dest/>> d:/gruntDemo/demo01/dest/>> ---------------->> d:/gruntDemo/demo01/src/>> d:/gruntDemo/demo01/src/>> d:/gruntDemo/demo01/src/>> d:/gruntDemo/demo01/src/>> d:/gruntDemo/demo01/src/>> text!src/demo01.html

Conclusion

It took us three days this week to learn grunt packaging related knowledge points. This knowledge is useful to you, and it takes a lot of effort to get it done !!!

If there are any mistakes in this article, let's make a summary later.