当前位置: 首页 > 面试题库 >

如何使用Grunt.js(0.3.x)连接和缩小多个CSS和JavaScript文件

颜熙云
2023-03-14
问题内容

注意:此问题仅与Grunt 0.3.x有关,已留作参考。 有关最新的Grunt 1.x版本的帮助,请参阅此问题下方的我的评论。

我目前正在尝试使用Grunt.js设置一个自动构建过程,以便首先串联然后最小化CSS和JavaScript文件。

我已经能够成功地串联和最小化我的JavaScript文件,尽管每次运行grunt时,它似乎只是追加到文件中而不是覆盖它们。

至于缩小甚至连接CSS,到目前为止,我还无法做到这一点!

就笨拙的CSS模块而言,我曾尝试使用consolidate-cssgrunt-css&,cssmin但无济于事。无法理解如何使用它们!

我的目录结构如下(是一个典型的node.js应用程序):

  • app.js
  • grunt.js
  • /public/index.html
  • / public / css / [各种CSS文件]
  • / public / js / [各种javascript文件]

这是我的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');

};

因此,总结一下,我需要两个问题的帮助:

  1. 如何将文件夹下的所有CSS文件串联并缩小/public/css/为一个文件,例如main.min.css
  2. 为什么grunt.js不断追加到串联和精缩的JavaScript文件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.xGrunt 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和