Grunt+Bower入门

日期:2015-7-12 15:02 | 标签: Grunt Bower | 阅读:459

这两个工具可以使前端项目开发速度上升一个层次。此次在windows7 OS下测试。

Grunt

使用时确保已经安装好了nodeJs,安装使用经过以下步骤。

  1. 敲入:
    npm install -g grunt-cli
    
  2. 进入项目文件夹,敲入:
    npm init
    
    会提示你输入项目信息,成功后生成package.json,大概长这样:
    {
     "name": "myapp",
     "version": "0.0.0",
     "description": "my first web app",
     "main": "index.js",
     "scripts": {
         "test": "echo \" Error: no test specified\" && exit 1"
     },
     "author": "pengyi",
     "license": "MIT"
    }
    
  3. 接着敲入:

    npm install grunt –save-dev,
    

    将grunt命令安装到package.json中,-dev表示开发依赖,若为运行依赖去掉即可。

  4. 接下来你就可以happy的引入自动化插件为你服务了,比如说安装grunt-contrib-uglify压缩插件。 步骤如下:

    1. 安装
      npm install grunt-contrib-uglify –save-dev
      
    2. 在Gruntfile.js中输入配置信息
      uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
      }
      grunt.register('default', ['uglify']);//可选,注册为默认服务用
      
    3. 运行
      grunt uglify
      

Bower

Bower,类似npm,其支持AMD,基于git。 具体的安装配置与grunt类似,这里暂不理出来了。

参考自

网络
AngularJs权威教程

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式