Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.

我正在try 使用Grunt.js设置一个自动构建过程,首先连接然后缩小CSS和JavaScript文件.

我已经能够成功地连接和缩小我的JavaScript文件,尽管每次我运行Grut时,它似乎只是追加到文件中,而不是覆盖它们.

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

在grunt CSS模块方面,我try 使用consolidate-cssgrunt-css和;cssmin但没有用.我不知道如何使用它们!

我的目录 struct 如下(作为一个典型的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. 如何将我在文件夹/public/css/下的所有CSS文件连接并缩小为一个文件,比如说main.min.css
  2. 为什么grunt.js一直附加到/public/js/下连接和缩小的javascript文件concat.jsconcat.min.js,而不是在每次运行命令grunt时覆盖它们?

Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x

Grunt.js已移动到Grunt 0.4.x中的新 struct (该文件现在称为Gruntfile.js).请参阅我的开放源码项目Grunt.js Skeleton以获取有关为Grunt 1.x设置构建过程的帮助.

Grunt 0.4.x上升到Grunt 1.xshould not introduce many major changes.

推荐答案

js包含在concat任务的源文件public/js/*.js中.您可以让任务在再次连接之前删除concat.js(如果文件存在),传递一个数组以显式定义要连接的文件及其顺序,或者更改项目的 struct .

如果做后者,你可以把所有的源代码放在./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个任务

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

内置min任务使用的是UGLIFIYJS,所以您需要一个替代品.我发现grunt-css门课相当不错.安装后,将其加载到您的咕噜文件中

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

Css相关问答推荐

在carousel组件上应用css转换时出现问题

单独.css文件中的样式不适用于Angular 元件

如何仅在CSS中屏蔽具有多个形状的div框?

当弯曲方向设置为列时如何制作等高卡片?

如何在Safari中隐藏CSS的offset-path属性?CSS支持规则不按预期工作

Img 未拉伸以满足所需的纵横比

有人可以解释为什么我的 CSS 转换如此突然吗?

使 MUI 自动完成打断长词以适合布局

当父元素处于子元素 input 的焦点状态时更改父元素的样式

包含tailwind 中固定纵横比框的内容

使用之前和之后为锚标签添加画笔描边效果

Rails 7引擎如何使未编译的样式表可用于托管应用程序?

CSS3 变换:旋转;在 IE9 中

twitter-bootstrap:当鼠标悬停在 -tag 中的 btn-group 上时,如何go 掉带下划线的按​​钮文本?

如何将页脚保持在屏幕底部

将 Web 字体转换和渲染为 base64 - 保持原始外观

div内的CSS中心内容

CSS3 过渡:过渡:全部是否比过渡:x慢?

CSS3单向过渡?

我可以在 css 中指定 maxlength 吗?