Generator Bootstrap Less 项目教程

Generator Bootstrap Less 项目教程

generator-bootstrap-lessA yeoman generator for Twitter Bootstrap with LESS项目地址:https://gitcode.com/gh_mirrors/ge/generator-bootstrap-less

1. 项目的目录结构及介绍

Generator Bootstrap Less 是一个用于生成基于 Less 版本的 Bootstrap 项目的 Yeoman 生成器。以下是生成的项目目录结构及其介绍：

my-new-project/
├── app/
│   ├── index.html
│   ├── less/
│   │   ├── main.less
│   │   └── variables.less
│   ├── js/
│   │   └── main.js
│   └── images/
├── test/
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jshintrc
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── Gruntfile.js
├── LICENSE
├── README.md
└── package.json

• app/: 包含项目的主要文件，如 HTML、Less 文件、JavaScript 文件和图片。
  • index.html: 项目的主页面。
  • less/: 包含 Less 样式文件。
    • main.less: 主样式文件，通常会导入其他 Less 文件。
    • variables.less: 包含 Bootstrap 的变量，方便自定义。
  • js/: 包含 JavaScript 文件。
    • main.js: 主 JavaScript 文件。
  • images/: 存放项目所需的图片。
• test/: 包含项目的测试文件。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .gitattributes: Git 属性配置文件。
• .gitignore: Git 忽略文件配置。
• .jshintrc: JSHint 配置文件，用于 JavaScript 代码检查。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• CHANGELOG.md: 项目更新日志。
• Gruntfile.js: Grunt 任务配置文件，用于自动化构建。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 Gruntfile.js 和 package.json。

Gruntfile.js

Gruntfile.js 是 Grunt 任务配置文件，用于自动化构建过程。以下是主要任务：

• less: 编译 Less 文件为 CSS。
• watch: 监视文件变化并自动执行相关任务。
• connect: 启动本地服务器，用于预览项目。

package.json

package.json 包含项目的依赖和脚本配置。以下是主要部分：

• dependencies: 项目运行所需的依赖。
• devDependencies: 开发环境所需的依赖。
• scripts: 定义了一些常用的脚本命令，如 grunt serve 用于启动本地服务器预览项目。

3. 项目的配置文件介绍

项目的配置文件主要包括 .editorconfig、.jshintrc 和 Gruntfile.js。

.editorconfig

.editorconfig 文件用于统一不同编辑器和 IDE 的代码风格。以下是常见配置：

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.jshintrc

.jshintrc 文件用于配置 JSHint，进行 JavaScript 代码检查。以下是常见配置：

{
  "esversion": 6,
  "globals": {
    "jQuery": true,
    "$": true
  }
}

Gruntfile.js

Gruntfile.js 文件用于配置 Grunt 任务。以下是常见配置：

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      development: {
        files: {
          "app/css/main.css": "app/less/main.less"
        }
      }
    },
    watch: {
      styles: {
        files: ["app/less/**/*.less"],
        tasks: ["less"],
        options: {
          spawn: false
       

generator-bootstrap-lessA yeoman generator for Twitter Bootstrap with LESS项目地址:https://gitcode.com/gh_mirrors/ge/generator-bootstrap-less