咕噜咕噜的cssmin和时间戳文件名

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

我的咕噜咕噜文件看起来像这样：

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

但是我得到一个错误正在加载"咕噜咕噜.js"任务...错误

语法错误：意外的标识符警告：未找到任务"默认"。使用 --force 继续。

编辑：

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

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

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

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

文档描述咕噜声rename功能如下：

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

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

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

咕噜咕噜.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(/.[wW]+?$/, '') // 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 内置路径模块。
```
var path = require('path');
```
此模块稍后在rename函数中使用，以帮助创建新的时间戳文件名，并确定要return的目标文件路径：
然后，我们通过以下行创建一个格式化为YYYY-MM-DD-HH-MM-SS的本地时间戳：
```
var tzOffset = (new Date()).getTimezoneOffset() * 60000;
var timeStamp = (new Date(Date.now() - tzOffset)).toISOString().slice(0, -1)
.replace(/.[wW]+?$/, '') // Delete from dot to end.
.replace(/:|s|T/g, '-');  // Replace colons, spaces, and T with hyphen.
```
注意：我们将生成的时间戳分配给任何 grunt 任务之外的timeStamp变量，以确保所有生成的文件名都获得相同的时间戳。
日期/时间格式将基于您的本地时区，而不是 UTC(协调世界时)。
然后，我们重新配置您的cssmin任务以动态构建文件对象，而不是使用紧凑格式。通过以这种方式配置任务，我们可以访问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
```

但是，如果您还想在dist目录中包含源css文件夹，如下所示：

.
├── 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'],
// ...

使用 glob 模式缩小多个`.css`文件并为其添加时间戳

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

但是，如果要缩小(和时间戳)在css目录中找到的许多.css文件，无论深度如何，都可以使用通配模式。例如，假设您的源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

附加信息：

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

使用 glob 模式缩小多个`.css`文件并为其添加时间戳

相关内容

最新更新

热门标签：

咕噜咕噜的cssmin和时间戳文件名

附加信息：

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

使用 glob 模式缩小多个.css文件并为其添加时间戳

相关内容

最新更新

热门标签：

使用 glob 模式缩小多个`.css`文件并为其添加时间戳