Concat, Cssmin, uglify

Weekend a bit lazy, ran to see "Outsmart Tiger Mountain", Hand tore the Devil's God Plot Festival by Xu Lao Strange a memory line to explain the past, the cow to the acme of this four-and-a-kind handling method, hand tear plus points, four stars recommended.

-----------------------------Gossip split Line-----------------------------

Concat, Cssmin, uglify correspond to merge, CSS compression, JS compression confusion, as to why the three put together, in the back of the Usemin module will give an explanation.

Options for Concat (GitHub address)

2. Separator: Is the delimiter between the source files, the default is Grunt.util.linefeed, which is the newline character. If the source file is JS and needs to be uglify later, change this option to ";"

4. Banner: Header comment For the target file, default is ""
6. Footer: The bottom comment of the destination file, default is ""
8. Stripbanners: Whether to delete comments from the header of the source file when merging, false by default
10. Process: Content substitution for the target file, accepts three types: Boolean, Funtion, Object. There are two substitution modes, one is set to function for all substitutions, one is set to TRUE or the object is replaced with a template (<% =var%>).
2. new two files, Helloworld.js

    (function   () {Console.log ( ' Hello World ' 

   Hellogrunt.js

    (function   () {console.log ( ' Hello Grunt ' 

    

4. Configure in Gruntfile.js
   

    module.exports = function   (Grunt) {require ( ' load-grunt-tasks ' ) (grunt);  var  path = {dest:  ' dest/'  src:  ' src/' };                Grunt.initconfig ({gpath:path, concat: {test: {  ' <%= gpath.src%>*.js ' }    ]            }        }    }); Grunt.registertask ( ' Default ', [' concat '  

    

6. the above is a concat task that does not set process, the output target file
   

    (function   () {console.log ( ' Hello Grunt '  function   () {Console.log ( ' Hello World ' 

    

8. set process to function, modify concat:test in Gruntfile.js as follows

    test: {options: {Proce SS:  function   (SRC, filepath) {        return  src.replace (/hello/g, ' Hi ' );            }}, files: [{src:  ' <%= gpath.src%>*.js '  ' <%= gpath.dest%>hello.js ' );}) ();( function   () {Console.log ( ' Hi World ' 

    

10. Set process to true so that the template can be used in the source file, Gruntfile.js is not affixed, the source file is as follows
    

    (function() {    if(<%= concat.test.options.process%>) {        Console.log ( ' Hello World ');}    ) ();

    Target file
    
    

    (function() {    console.log (' Hello Grunt ');}) ();(function() {    if(true) {        console.log (' Hello World ');}    ) ();

    It is important to note that when the process is set to true, the global object of the template is an incoming parameter of Grunt.initconfig, and if you want to modify the global object, look down

11. Set the process to Object,global object in the Data property, Gruntfile as follows
    

    Module.exports =function(Grunt) {require (' Load-grunt-tasks ') (grunt); varPath ={dest:' dest/', SRC:' src/'}, Global={bool:true    }; Grunt.initconfig ({gpath:path, concat: {test: {options: {PR                    Ocess: {Data:global}}, files: [ {src:' <%= gpath.src%>*.js ', dest:' <%= gpath.src%>hello.js '                    }                ]            }        }    }); Grunt.registertask (' Default ', [' concat ']);};

    source file

    (function() {    if(<%= bool%>) {        console.log (' Hello World ');    }}) ();

    The output target file, such as 5

12. Sourcemap, Sourcemapname, Sourcemapstyle: Not studied, later supplemented

Options for Cssmin (GitHub address)

1. Report: Accept ' min ' and ' gzip ', default former, generate file is the same (do not know if it is related to my environment is window), select ' gzip ' when the size of gzip file will be reported
   

   Minrunning "Cssmin:test" (cssmin) taskfile dest/base.css created:2.95 kb→2.34 kbfile dest/main.css created:1.05 kb→ 954 b//gziprunning "Cssmin:test" (cssmin) taskfile dest/base.css created:2.95 kb→2.34 kb→803 B (gzip) File Dest/main. CSS created:1.05 kb→954 b→428 B (gzip)

Options for Uglify (GitHub address)

1. Mangle: Confusion,accepts two types: Boolean, Object, the default value is {}
   Source file Helloworld.js
   

   (function() {    var hello = ' Hello ',    = ' world ';     + World );}) ();

   When Mangle is not set, the destination file helloworld.min.js

   ! function () {var a= "Hello", b= "World"; Console.log (A+b)} ();

   When setting Mangle to False, the destination file

   ! function () {var hello= "Hello", world= "World"; Console.log (Hello+world)} ();

   When setting mangle to object, the non-confusing variables are placed in the "except" property

   mangle: {    except: [' Hello ']}

   Target file

   ! function () {var hello= "Hello", a= "World"; Console.log (Hello+a)} ();

2. Compress: Compress, remove unnecessary code,accepts two types: Boolean, Object, the default value is {}. When the type is object with a slightly more attribute, post the official address, the following only shows the application of the Global_defs attribute
   In the development period, you need to log, and after the online need to remove log, then you can use the Compress Global_defs property
   source file
   

   (function() {    var hello = ' Hello ',        = ' world ';    DEBUG&&console.log (hello + World );    DEBUG&&alert (hello + World );}) ();

   Gruntfile.js in the development environment

   Compress: {    global_defs: {        true    }}

   Target file

   ! function () {var a= "Hello", b= "World";! 0&&console.log (A+b),!0&&alert (A+b)} ();

   Gruntfile.js in the publishing environment

   Compress: {    global_defs: {        false    }}

   The resulting target file is an empty file because all the execution code is canceled
   PS: The above is to demonstrate the usefulness of global_defs, if you want to simply remove the console statement, you can directly use the Drop_console (default false) property
   source file

   (function() {    var hello = ' Hello ',        = ' world ';     + World );     + World );}) ();

   Gruntfile.js

   Compress: {    true}

   Target file

   ! function () {var a= "Hello", b= "World"; alert (A+b)} ();

4. Beautify: It is generally understood that to preserve line breaks, two types are accepted: Boolean, Object, and the default value is False. More parameters, official address.
6. Expression: Parsing a JSON string into a standard JSON, conflicting with mangle, compress, false by default
8. enclose: Will JS use anonymous function wrap, conflict with mangle, accept object, default to undefined
   

   Gruntfile.js

    compress: false  ,mangle:  false  ,enclose: { ' window.name ': ' Name '  

   Source file

    (function   { var  hello = ' Hello ' Span style= "color: #000000;"    > World  = ' World '  + world + name); // name as an external variable }) ();

   Destination file

   ! function  (name) {! function  {var  hello= "Hello", world= "World"; Console.log (Hello+world+name)} ()} ( Window.name); 

    

9. Wrap: Use the anonymous function wrap for JS and expose an object as an interface, conflict with mangle, accept string, default to undefined
   Gruntfile.js
   

   False' test '

   source file

   (function() {    var hello = ' Hello ',    = ' world ';     = Hello + world;    // exports as an object    of external exposure Console.log (window.test.name);    // test for the above set of wrap, corresponding to exports}) ();

   Target file

   ! function (Exports,global) {global.test=exports,function() {var hello= "Hello", world= "World"; Exports.name=hello+world, Console.log (Window.test.name)} ()} ({},function() {returnThis} ());

11. Maxlinelen: Limit length per line, 0 cancellation limit, accept number, default is 32000
13. Asciionly: The non-ASCII characters in JS are expressed in Unicode and the default is False
15. Exportall: Automatically add all variables in JS to exports
    Source file
    

     //  Note that it is not in the anonymous function  var  hello = ' Hello ' ,world  = ' World ' ;exports.name  = Hello + World;console.log (window.test.name);  

    Gruntfile.js

     mangle: false  ,wrap:  ' Test ' ,exportall:  true  

    Destination file

    !function (Exports,global) {global.test=exports;var hello= "Hello", World= "World"; Exports.name=hello+world,console.log (Window.test.name), Exports.hello=hello,exports.world=world} ( {},function () {return This} ()); 

     

17. Preservecomments: Leave comment relevant, accept false, ' all ', ' some ', Function
    

    /**/ / @preserve Preserve ' all ' some ' reserved //  @license license ' All ' some ' reserved //  @cc_on cc_on ' all ' some ' reserved //  @tarol ' all ' reserved (function  () {    console.log (' Hello World ');}) ();

    Funtion the incoming parameter arguments[1].value is the comment content, and returns true to retain the comment

19. Banner, footer: slightly
21. Sourcemap, Sourcemapname, Sourcemapin, sourcemapincludesources: Temporary

-----------------------------End Split Line-----------------------------

Mental and haggard, so write a little tired, the next article about clean and copy, how to write to see the mood.

Concat, Cssmin, uglify