如何通过grunt-contrib-uglify来整理js文件？ [英] how to minify js files in order via grunt-contrib-uglify?

问题描述

/folder/b.js

/folder/jQuery.js

/folder/a.js

/folder/sub/c.js

我想将所有这些js文件一分为二js文件 ：

jQuery.js - > a.js - > b.js - > c.js

问：

1.我可以通过grunt-contrib-uglify来做到吗？（事实上，有很多文件，单独指定所有源文件路径是不切实际的）

2.btw，如何在调试时获得未经修整的文件，并且在发布时获取缩小的单个文件并且无需更改脚本标记在html中（以及如何编写脚本标记）？

解决方案

p>

1）Uglify会重新排列目标文件中的函数，以便函数定义在顶部，函数在底部执行，但它看起来会保留函数执行的顺序。

这意味着，如果确保jQuery在Gruntfile的Uglify配置中首先提到，那么jQuery运行的定义其全局函数的函数将首先放入。

我使用这个配置：

  uglify：{
 options：{ 
 sourceMap：true 
}，
 build：{
 files：{$ b $'public / all.min.js'：['public / js / vendor / jquery -1.10.2.min.js'，'public / js / *。js']，
} 
} 
} 
  

2）我不认为有一个明确的方法可以实现这一点。它取决于什么web框架，模板框架和你有什么样的要求。我使用express + jade，并在我的主要布局中使用：

  if process.env.NODE_ENV ==='production' 
 script（src ='/ all.min.js'）
 else 
 script（src ='/ js / vendor / jquery-1.10.2.min.js'）
脚本（src ='/ js / someScript.js'）
脚本（src ='/ js / otherScript.js'）
  

在我的package.json中，我有：

$ $ p $ $ $ $ $ $ $ $ $ bpostinstall：grunt
}，

这意味着当我运行 npm install on deploy（在Heroku上）grunt运行以缩小/ concat文件，当应用程序以 NODE_ENV = production 使用缩小的客户端JavaScript。本地我得到原始的客户端JavaScripts，以便于调试。

两个缺点是：

• 我必须保留两个列表脚本文件同步（在Gruntfile和layout.js中）我通过在Gruntfile中使用 *。js 来解决这个问题，但这可能并不适用于所有人。您可以将JavaScript列表放在Gruntfile中，然后从中创建一个jade-template，但对于大多数项目来说这似乎有点矫枉过正。


• 如果您不信任Grunt配置，则基本上必须在本地使用 NODE_ENV = production 运行应用程序以验证缩小是否按照您的预期进行。

I have a directory like below:

/folder/b.js
/folder/jQuery.js
/folder/a.js
/folder/sub/c.js

I want to minify all these js files in one js file in order:

jQuery.js -> a.js -> b.js -> c.js

Q:
1.How can I do it via grunt-contrib-uglify?(In fact, there are lots of files, it is impractical to specify all source filepaths individually)

2.btw, How can I get unminified files when debug and get minified single file when release and no need to change script tag in html(and how to write the script tag)?

解决方案

Good questions!

1) Uglify will reorder the functions in the destination file so that function definitions are on top and function execution on bottom but it seems that it will preserve the order of the function executions.

This means that the function jQuery runs to define its global functions will be put first if you make sure jQuery is mentioned first in Uglify's config in the Gruntfile.

I use this config:

uglify: {
    options: {
        sourceMap: true
    },
    build: {
        files: {
            'public/all.min.js': ['public/js/vendor/jquery-1.10.2.min.js', 'public/js/*.js'],
        }
    }
}

2) I don't think there is one definite way to accomplish this. It depends on what web framework, templating framework and what kind of requirements you have. I use express + jade and in my main jade layout I have:

if process.env.NODE_ENV === 'production'
  script(src='/all.min.js')
else
  script(src='/js/vendor/jquery-1.10.2.min.js')
  script(src='/js/someScript.js')
  script(src='/js/otherScript.js')

In my package.json I have:

"scripts": {
  "postinstall": "grunt"
},

This means that when I run npm install on deploy (on Heroku) grunt is run to minify/concat files and when the app is started with NODE_ENV=production the minified client side javascript is used. Locally I get served the original client side javascripts for easy debugging.

The two downsides are:

• I have to keep the two lists of script files in sync (in the Gruntfile and in the layout.js) I solve this by using *.js in the Gruntfile but this may not suite everyone. You could put the list of javascripts in the Gruntfile and create a jade-template from this but it seems overkill for most projects.
• If you don't trust your Grunt config you basically have to test running the application using NODE_ENV=production locally to verify that the minification worked the way you intended.

这篇关于如何通过grunt-contrib-uglify来整理js文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！