Grunt玩Bootstrap

0 前面的工作

  1. 安装node

  2. sudo npm install -g grunt-cli全局环境中安装grunt-cli;

     K:bootstrap-sass-3.3.5 maizhikun$ sudo npm install -g grunt-cli
 Password:
 /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
 grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
 ├── resolve@0.3.1
 ├── nopt@1.0.10 (abbrev@1.0.7)
 └── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

  3. cd 到bootstrap目录 安装依赖关系 根据package.json,sudo npm install

  4. grunt dist(编译js和css到/dist/目录)

    失败,显示:

     K:bootstrap-sass-3.3.5 maizhikun$ grunt dist
 grunt-cli: The grunt command line interface. (v0.1.13)

 Fatal error: Unable to find local grunt.

 If you're seeing this message, either a Gruntfile wasn't found or grunt
 hasn't been installed locally to your project. For more information about
 installing and configuring grunt, please see the Getting Started guide:

 http://gruntjs.com/getting-started

    我更新了下numsudo npm update -g npm

    重新安装全局gruntsudo npm install -g grunt-cli

    查找网上资料执行了sudo npm install grunt --save-dev参考

    再执行grunt dist

     K:bootstrap-sass-3.3.5 maizhikun$ sudo grunt dist
 A valid Gruntfile could not be found. Please see the getting started guide for
 more information on how to configure grunt: http://gruntjs.com/getting-started
 Fatal error: Unable to find Gruntfile.

    傻傻的我最后 发现原来少了Gruntfile文件,因为我下载的Bootstrap是sass版本的.要下载源码版本才可以.但是下载原版后发现Gruntfile太庞大了.所以先放下.以后再去了解.现在先使用Grunt作为压缩JS工具所用.

1 在项目中使用

  1. 下载Bootstrap源码版本,拷贝package.json,Gruntfile.js.到所需目录下
  2. npm install 加载node_modules;

  3. 压缩JS 修改Gruntfile.js

     module.exports = function (grunt) {
 // 项目配置
 grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     uglify: {
         options: {
             banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
          build: {
             src: ['src/*.js','src/bootstrap/*.js'],
             dest: 'Haplox.min.js'
         }
     }
 });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认任务
  grunt.registerTask('default', ['uglify']);
  }

  4. grunt即可.

参考资料

详细从0开始http://www.cnblogs.com/yexiaochai/p/3603389.html

bootstrap中文http://v3.bootcss.com/getting-started/

中文Grunt文档http://www.gruntjs.net/getting-started

前端

Comments