1

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

我的 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 继续。

编辑：

这就是我最终想要实现的目标：

  1. 缩小一个css文件
  2. 在文件名的末尾添加时间戳。

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

4

1 回答 1

0

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

该文档描述了 gruntsrename功能如下：

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']);
};

附加信息：

  1. 首先，在上面，我们通过读行Gruntfile.js加载了nodejs内置的路径模块。

    var path = require('path');

    该模块稍后在rename函数中用于帮助创建新的时间戳文件名，并确定要return“编辑”的目标文件路径：

  2. 然后我们创建一个本地时间戳，格式如下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.

    注意：我们将生成的时间戳分配给timeStamp任何 grunt 任务之外的变量，以确保所有生成的文件名都获得相同的时间戳。

    日期/时间格式将基于您当地的时区，而不是 UTC（协调世界时）。

  3. 然后，我们重新配置您的cssmin任务以动态构建文件对象，而不是使用紧凑格式。通过以这种方式配置任务，我们可以访问该rename功能。

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

  1. 上面提供的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

  2. 但是，如果您还想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'],
// ...

.css使用 glob 模式缩小和时间戳多个文件

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

但是，如果您想缩小（和时间戳）.css在目录中找到的许多文件css，无论有多深，您都可以使用globbing 模式。例如，假设您的源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
于 2018-05-09T07:35:32.157 回答