Question

我正在尝试设置一个输出缩小的css文件的grunt任务，并使用时间戳更改文件名。

My Gruntfile如下所示：

module.exports = function (grunt) {

  //project configurations
  grunt.initConfig({

    cssmin: {
      target: {
        src: ["css/aw2018.css", ],
        dest: "dist/aw2018.min.css"
      }
    }

    replace: {
      foo: {
        options: {
          variables: {
            'timestamp': '<%= new Date().getTime() %>'
          },
          force: true
        },
        files: [{
          expand: true,
          cwd: 'css/',
          src: ['*.css/*.js'],
          dest: 'dist/',
          ext: '.<%= new Date().getTime() %>.js'
        }]
      }
    }

  });

  //load cssmin plugin
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  //create default task
  grunt.registerTask("default", ["cssmin"]);
  grunt.registerTask('default', 'replace');

};

但是我得到了一个错误加载“Gruntfile.js”任务......错误

SyntaxError：意外的标识符     警告：找不到任务“默认”。使用--force继续。

修改

这是我最终要努力实现的目标：

缩小css文件
在文件名末尾添加时间戳。

我想让它适用于文件夹中的任何css文件，但要将它们分开。例如，假设我有aw2018.css和aw2017.css。我希望他们两个都能完成任务，然后输出到他们自己的个别缩小的css文件，文件名末尾的时间戳为YYYY-MM-DD-HH-MM-SS。

Answer 1

这可以通过在动态构建文件对象时使用grunt的rename函数来实现，而不是使用其他任务。

该文档描述了grunts rename的功能如下：

rename嵌入自定义函数，该函数返回包含新目标和文件名的字符串。为每个匹配的src文件调用此函数（在扩展名重命名和展平后）。

在rename函数的主体内部，您可以添加自定义逻辑，以便为每个文件名附加时间戳。

以下Gruntfile.js配置显示了如何实现此目的：

<强> Gruntfile.js

module.exports = function (grunt) {

  var path = require('path'); // Load nodes built-in `path` module.

  // Obtain local timestamp formatted as: YYYY-MM-DD-HH-MM-SS
  var tzOffset = (new Date()).getTimezoneOffset() * 60000;
  var timeStamp = (new Date(Date.now() - tzOffset)).toISOString().slice(0, -1)
      .replace(/\.[\w\W]+?$/, '') // Delete from dot to end.
      .replace(/\:|\s|T/g, '-');  // Replace colons, spaces, and T with hyphen.

  grunt.initConfig({
    cssmin: {
      timestamp: {
        files: [{
          expand: true,
          cwd: 'css/',
          src: ['aw2017.css', 'aw2018.css'],
          dest: 'dist/',

          /**
           * Grunt rename function generates new destination filepath,
           # adds timestamp, and new min.css extension to the file name.
           # (https://gruntjs.com/configuring-tasks#the-rename-property)
           #
           * @param {String} dest - The path to the desination directory.
           * @param {String} src - The path to the source directory.
           * @returns {String} New dest path with time-stamped filename.
           */
          rename: function(dest, src) {
            var fileExt = path.extname(src),
              fileName = path.basename(src, fileExt),
              dirName = path.dirname(src),
              newFileExt = ['.min', fileExt].join(''),
              newFileName = [fileName, '-', timeStamp, newFileExt].join(''),
              newDestPath = path.join(dest, dirName, newFileName);

            return newDestPath;
          }
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['cssmin:timestamp']);
};

其他信息：

首先，在上面的Gruntfile.js中，我们通过行读取加载nodejs内置path模块。
```
var path = require('path');
```
稍后在rename函数中使用此模块来帮助创建新的带时间戳的文件名，并确定目标文件路径为return'ed：
然后我们通过以下行创建格式为YYYY-MM-DD-HH-MM-SS的本地时间戳：
```
var tzOffset = (new Date()).getTimezoneOffset() * 60000;
var timeStamp = (new Date(Date.now() - tzOffset)).toISOString().slice(0, -1)
    .replace(/\.[\w\W]+?$/, '') // Delete from dot to end.
    .replace(/\:|\s|T/g, '-');  // Replace colons, spaces, and T with hyphen.
```
注意：我们将生成的时间戳分配给任何grunt任务之外的timeStamp变量，以确保所有生成的文件名获得相同的时间戳。

日期/时间格式将基于您当地的时区而不是UTC（协调世界时）。
然后，我们将您的cssmin任务重新配置为build the files object dynamically，而不是使用compact format。通过这种方式配置任务，我们可以访问rename函数。

对当前配置的进一步使用和修改：

上面提供的Gruntfile.js配置从以下目录结构中获取两个源CSS文件，名为aw2017.css和aw2018.css：

.
└── css
    ├── aw2017.css
    └── aw2018.css

通过CLI运行grunt命令后，它会将缩小的（带时间戳的）.css文件输出到新的dist目录。结果如下：

.
├── css
│   ├── aw2017.css
│   └── aw2018.css
└── dist
    ├── aw2017-2018-05-09-08-35-57.min.css
    └── aw2018-2018-05-09-08-35-57.min.css

但是，如果您还要在css目录中包含源dist文件夹，请执行以下操作：

.
├── css
│   ├── aw2017.css
│   └── aw2018.css
└── dist
    └── css
        ├── aw2017-2018-05-09-08-35-57.min.css
        └── aw2018-2018-05-09-08-35-57.min.css

然后您需要将cwd任务中src和cssmin属性的值更改为：

// ...
cwd: '.',
src: ['css/aw2017.css', 'css/aw2018.css'],
// ...

使用glob模式

.css

目前，在您的问题中，您似乎只想缩小两个.css文件，即aw2017.css和aw2018.css。

但是，如果您想缩小（和时间戳）.css目录中找到的许多css文件，无论多深层次，您都可以使用{ {3}}。例如，假设您的源css目录如下所示：

.
└── css
   ├── a.css
   ├── b.css
   ├── foo
   │   ├── bar
   │   │   └── c.css
   │   └── d.css
   └── quux
       └── e.css

...如果您将cwd任务中src和cssmin属性的值更改为：

// ...
cwd: '.',
src: ['css/**/*.css'],
// ...

您的结果输出将是这样的：

.
├── css
│   └── ...
└── dist
    └── css
        ├── a-2018-05-09-08-35-57.min.css
        ├── b-2018-05-09-08-35-57.min.css
        ├── foo
        │   ├── bar
        │   │   └── c-2018-05-09-08-35-57.min.css
        │   └── d-2018-05-09-08-35-57.min.css
        └── quux
            └── e-2018-05-09-08-35-57.min.css

Grunt cssmin和时间戳文件名

1 个答案:

其他信息：

对当前配置的进一步使用和修改：

使用glob模式