Grunt cssmin和時間戳文件名

Question

我正在嘗試設置一個grunt任務，該任務輸出一個縮小的css文件並使用時間戳更改文件名。

我的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”任務時遇到錯誤...錯誤

語法錯誤：意外的標識符警告：找不到任務“默認”。 使用--force繼續。

編輯：

這是我最終要實現的目標：

1. 縮小CSS文件
2. 在文件名的末尾添加一個時間戳。

我想讓它適用於文件夾中的任何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']);
};

---

附加信息：

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. 

   注意：我們將生成的時間戳分配給任何grunt任務之外的timeStamp變量，以確保所有結果文件名都具有相同的時間戳。

   日期/時間格式將基於您當地的時區，而不是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 

   那么您需要將cssmin任務中cwd和src屬性的值更改為此：

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

---

使用全局模式最小化和標記多個.css文件

當前，在您的問題中，您似乎只想縮小兩個.css文件，即aw2017.css和aw2018.css 。

但是，如果您想最小化 （和加蓋時間戳） css目錄中找到的許多.css文件（無論深度多深），都可以使用globbing模式 。 例如，假設您的源css目錄如下所示：

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

...並且如果您將cssmin任務中的cwd和src屬性的值更改為此：

// ...
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