注意:此问题仅与Grunt 0.3.x有关,已留作参考。 有关最新的Grunt 1.x版本的帮助,请参阅此问题下方的我的评论。
我目前正在尝试使用Grunt.js设置一个自动构建过程,以便首先串联然后最小化CSS和JavaScript文件。
我已经能够成功地串联和最小化我的JavaScript文件,尽管每次运行grunt时,它似乎只是追加到文件中而不是覆盖它们。
至于缩小甚至连接CSS,到目前为止,我还无法做到这一点!
就笨拙的CSS模块而言,我曾尝试使用consolidate-css
,grunt-css
&,cssmin
但无济于事。无法理解如何使用它们!
我的目录结构如下(是一个典型的node.js应用程序):
这是我的grunt.js文件当前在应用程序的根文件夹中的样子:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: '<json:package.json>',
concat: {
dist: {
src: 'public/js/*.js',
dest: 'public/js/concat.js'
}
},
min: {
dist: {
src: 'public/js/concat.js',
dest: 'public/js/concat.min.js'
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
node: true
},
globals: {
exports: true,
module: false
}
},
uglify: {}
});
// Default task.
grunt.registerTask('default', 'concat min');
};
因此,总结一下,我需要两个问题的帮助:
/public/css/
为一个文件,例如main.min.css
concat.js
,并concat.min.js
根据/public/js/
,而不是每一个命令时覆盖它们grunt
运行?2016年7月5日更新-从Grunt 0.3.x升级到Grunt 0.4.x或1.x
Grunt.js
已移至中的新结构Grunt 0.4.x
(该文件现在称为Gruntfile.js
)。请参阅我的开源项目Grunt.js
Skeleton,
以获取有关为设置构建过程的帮助Grunt 1.x
。
从过渡Grunt 0.4.x
到Grunt 1.x
不应引入许多重大变化。
concat.js已包含在concat
任务的源文件中public/js/*.js
。您可能需要执行以下任务:concat.js
再次连接之前将其删除(如果文件存在),传递一个数组以显式定义要连接的文件及其顺序,或者更改项目的结构。
如果要进行后者,则可以将所有源代码./src
和构建文件放在下面./dest
src
├── css
│ ├── 1.css
│ ├── 2.css
│ └── 3.css
└── js
├── 1.js
├── 2.js
└── 3.js
然后设置您的 concat 任务
concat: {
js: {
src: 'src/js/*.js',
dest: 'dest/js/concat.js'
},
css: {
src: 'src/css/*.css',
dest: 'dest/css/concat.css'
}
},
您的 最小 任务
min: {
js: {
src: 'dest/js/concat.js',
dest: 'dest/js/concat.min.js'
}
},
内置 min 任务使用UglifyJS,因此您需要替换。我发现grunt-css非常好。安装后,将其加载到您的grunt文件中
grunt.loadNpmTasks('grunt-css');
然后设置
cssmin: {
css:{
src: 'dest/css/concat.css',
dest: 'dest/css/concat.min.css'
}
}
请注意,用法类似于内置的min。
将您的default
任务更改为
grunt.registerTask('default', 'concat min cssmin');
现在,运行grunt
将产生您想要的结果。
dest
├── css
│ ├── concat.css
│ └── concat.min.css
└── js
├── concat.js
└── concat.min.js
问题内容: 您好,我正在使用uglifyJs来最小化我的javascript文件,它一次可以处理一个文件,我想要的是将存在于名为JS的文件夹中的所有javascript文件最小化为名为JSM的文件夹。我的JS文件夹中有2个文件,分别称为test1.js和test2.js,我想对该文件夹运行uglify并在JSM文件夹中生成test1.min.js和test2.min.js,所以有一种方法可以这个?
问题内容: 我正在尝试通过合并和压缩CSS和JS文件来优化网站性能。考虑到我所面临的实际情况,我的问题更多地是关于如何实现这一(具体)步骤的(尽管在其他开发人员中也应该是典型的)。 我的页面引用了多个CSS和JS文件,如下所示: 对于生产版本,我想将3个CSS文件合并为一个,并使用例如将其最小化。但是,然后,我需要更新所有需要这3个文件的页面,以引用刚缩小的CSS。这似乎容易出错(例如,您要在许多
我正在使用来自Grav(https://getgrav.org/downloads/skeletons)的Saturn站点主题,并希望更改主页的背景图像(以及最终的其他样式)。在主题的自定义CSS()中,我更改了背景图像,但除非同时更新和,否则不会呈现新图像。 我相信两个档案都改是不合适的;系统应该生成一个缩微CSS的新版本。阅读Grav文档(https://learn.getgrav.org/t
我试图在网站www.nhadatsonnghia.com的一篇文章中为图像创建一个放大/缩小功能。当一切正常工作时,出现了一个错误,即jquery只对第一个标记中的第一个图像起作用,并且后续每个标记中的图像无法放大/缩小。运行后,只有第一个图像具有style=“transform:scale(1);”类。 你可以看到它在这里工作 那么我应该如何修正放大/缩小每个div中的每个图像呢?如果你能建议我
我需要在一个缩小的javascript文件中替换几个值。操作系统是高山Linux。 我正在尝试编写一个通用正则表达式,它将查找和任何字符,直到下一个像这样:并替换为或无论变量中的值是什么。这个脚本需要一直工作。它不应该依赖于在之后出现的was(表示属性中的值)。 以下是文件中的前几个字符 这是我的开始它根本不是通用的。。。 我试了几个小时——任何建议都欢迎。 提前谢谢!
下面的代码片段是从JoinedStreams的javadoc复制的 这两个流仅基于一个键(通过< code>t =计算)进行连接 我会问我如何基于多个键进行连接,例如,one.a = two.a和