用Grunt搭建基于LESS的前端html开发框架

2. 加速NPM安装
npm install -g cnpm --registry=http://r.cnpmjs.org
安装cnpm国内镜像, 以后所有npm命令换成用cnpm执行即可

3. 安装grunt
npm install -g grunt-cli

4. 在工程目录下建立配置文件Gruntfile.js
    本例中, 所做的事情包括:
      a. 组合一些less到一个文件
      b. 用less编译不同版本的css
      c. 填充html模版并部署
      d. 实时侦听以上变化并自动做相应编译

module.exports = function(grunt) {
          grunt.initConfig({
             pkg: grunt.file.readJSON('package.json'),
             concat: {
                        options: {
                                banner: '/*! APP.common.css@<%= pkg.name %> - v<%= pkg.version %> - ' +
                                        '<%= grunt.template.today("yyyy-mm-dd") %> */'
                            },
                            mobileLess: {
                              src: ['src/mobile/less/APP_common/*.less'],
                              dest: 'src/mobile/less/APP.common_grunt.less',
                         }
            },
            less: {
              development: {
                options: {
                  compress: false,
                  yuicompress: false
                },
                files: {
                  "css/APP.common.css": "src/mobile/less/APP.common_grunt.less",
                  "css/APP.web.index.css": "src/web/less/APP.web.index.less"
                }
              },
              production: {
                options: {
                  modifyVars: {
                            imagepath_page: '"/misc/images/"',
                            imagepath: '"/misc/images/"'
                  },
                  compress: true,
                  yuicompress: true,
                  optimization: 2
                },
                files: {
                  "css/pub/APP.common.css": "src/mobile/less/APP.common_grunt.less",
                  "css/pub/APP.web.index.css": "src/web/less/APP.web.index.less"
                }
              }
            },
            htmlbuild: {
                        mobile: {
                                src: 'src/mobile/html/*.html',
                                desc: './',
                                options: {
                                        beautify: true,
                                        relative: true,
                                        sections: {
                                                layout: {
                                                        footbar: 'src/mobile/html/inc/footbar.html'
                                                }
                                        }
                                }
                        },
                        web: {
                                src: 'src/web/html/*.html',
                                desc: './'
                        }
            },
            watch: {
              options: {
                livereload: true
              },
              grunt: {
                files: ['Gruntfile.js']
              },

styles: {
                files: [
                        'src/**/less/*.less',
                        'src/**/less/**/*.less'
                ],
                tasks: [
                        'concat:mobileLess',
                        'less'
                ],
                options: {
                  nospawn: true
                }
              },
              htmls: {
                files: [
                        'src/**/html/*.html',
                        'src/**/html/**/*.html'
                ],
                tasks: [
                        'htmlbuild'
                ],
                options: {
                  nospawn: true
                }
              }
            }
          });

          grunt.loadNpmTasks('grunt-contrib-concat');
          grunt.loadNpmTasks('grunt-contrib-less');
          grunt.loadNpmTasks('grunt-contrib-watch');
          grunt.loadNpmTasks('grunt-html-build');

          grunt.registerTask('default', ['watch']);
        };

5. 建立并配置 package.json
在项目目录下运行 npm init , 填写出现的各种选项, 或者直接回车到完成
打开生成的 package.json, 并添加 devDependencies 节点 --如果后续的编译出错, 往往是这里的版本号不够新

{
          "name": "html",
          "version": "0.0.0",
          "description": "",
          "main": "Gruntfile.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
          },
          "author": "",
          "license": "ISC",
          "devDependencies": {
            "grunt": "~0.4.1",
            "grunt-contrib-concat": "~0.4.0",
            "grunt-contrib-less": "~0.11.0",
            "grunt-contrib-watch": "~0.6.1",
            "grunt-html-build": "~0.3.2"
          }
        }

6. 安装项目依赖包
在项目目录下运行 cnpm install , 将把 package.json->devDependencies下注明的依赖包下载到 node_modules

7. 运行grunt
在项目目录下执行 grunt 即可

巴特西

用Grunt搭建基于LESS的前端html开发框架

最新文章

热门文章