grunt-purifycss 项目教程
1. 项目的目录结构及介绍
grunt-purifycss/
├── tasks/
│ └── purifycss.js
├── Gruntfile.js
├── package.json
├── README.md
└── test/
├── fixtures/
│ ├── example.css
│ ├── example.html
│ └── example.js
└── purifycss_test.js
- tasks/: 包含 grunt-purifycss 的核心任务文件
purifycss.js
。 - Gruntfile.js: 项目的配置文件,用于定义和配置 grunt 任务。
- package.json: 项目的依赖管理文件,包含项目的基本信息和依赖包。
- README.md: 项目的说明文档,包含项目的介绍、安装和使用方法。
- test/: 包含项目的测试文件,其中
fixtures/
目录下有示例文件用于测试,purifycss_test.js
是测试脚本。
2. 项目的启动文件介绍
项目的启动文件是 Gruntfile.js
,它定义了 grunt 任务的配置和执行流程。以下是 Gruntfile.js
的基本结构:
module.exports = function(grunt) {
grunt.initConfig({
purifycss: {
options: {
// 配置选项
},
target: {
src: ['test/fixtures/*.html', 'test/fixtures/*.js'],
css: ['test/fixtures/*.css'],
dest: 'tmp/purestyles.css'
}
}
});
grunt.loadNpmTasks('grunt-purifycss');
grunt.registerTask('default', ['purifycss']);
};
- grunt.initConfig(): 初始化配置,定义
purifycss
任务的选项和目标。 - grunt.loadNpmTasks(): 加载
grunt-purifycss
任务。 - grunt.registerTask(): 注册默认任务,执行
purifycss
任务。
3. 项目的配置文件介绍
项目的配置文件是 Gruntfile.js
,它包含了 purifycss
任务的具体配置。以下是配置文件的详细介绍:
module.exports = function(grunt) {
grunt.initConfig({
purifycss: {
options: {
// 配置选项
},
target: {
src: ['test/fixtures/*.html', 'test/fixtures/*.js'],
css: ['test/fixtures/*.css'],
dest: 'tmp/purestyles.css'
}
}
});
grunt.loadNpmTasks('grunt-purifycss');
grunt.registerTask('default', ['purifycss']);
};
- options: 配置选项,可以包含自定义的选项,如是否压缩输出文件等。
- target: 定义任务的目标,包括源文件(
src
)、CSS 文件(css
)和输出文件(dest
)。
通过以上配置,grunt-purifycss
任务会扫描指定的 HTML 和 JS 文件,提取使用的 CSS 选择器,并生成一个精简的 CSS 文件。