首页 > PHP资讯 > HTML5培训技术 > Grunt 使用说明

Grunt 使用说明

HTML5培训技术

  Gruntjs是一款基于nodejs的javascript项目的自动化构建工具。很多知名的开源项目都在使用,如:jquery、yui、qunit、angular.js、CanJS、Modernizr等。

  一、安装nodejs

  nodejs.org/#download

  如果以前全局安装过grunt 0.3x,执行以下命令

  npm uninstall -g grunt

  二、安装grunt-cli

  npm install -g grunt-cli

  三、安装templates

  //clone the template inside of the ~/.grunt-init/ directory.//http://gruntjs.com/project-scaffolding#installing-templatesgit clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquerygit clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

  四、已经存在的grunt项目

  安装插件

  如果有配置文件package.json,执行npm install可以安装项目依赖的Grunt插件

  npm install

  或者直接通过官网gruntjs.com/plugins安装插件

  使用

  grunt//执行默认命令

  五、新建grunt项目

  创建项目

  mkdir projectgrunt-init template //如grunt-init gruntfile

  当前项目下安装grunt

  npm install grunt --save-dev

  package.json

  可以在这个文件中配置项目依赖的Grunt插件

  配置Gruntfile

  文件名为Gruntfile.js或Gruntfile.coffee,在这个文件中配置各种构建任务及其加载任务所需要的插件。

  安装插件

  如果有配置文件package.json,执行npm install可以安装项目依赖的Grunt插件

  npm install

  或者直接通过官网gruntjs.com/plugins安装插件

  使用

  grunt//执行默认命令,也可以使用

  六、前端开发推荐插件

  grunt-contrib-clean

  npm install grunt-contrib-clean --save-dev

  grunt-contrib-concat

  npm install grunt-contrib-concat --save-dev

  grunt-yui-compressor

  npm install grunt-yui-compressor

  grunt-contrib-csslint

  npm install grunt-contrib-csslint --save-dev

  grunt-contrib-jshint

  npm install grunt-contrib-jshint --save-dev

  grunt-contrib-qunit

  npm install grunt-contrib-qunit --save-dev

  grunt-contrib-copy

  npm install grunt-contrib-copy --save-dev

  grunt-contrib-uglify

  npm install grunt-contrib-uglify --save-dev

  grunt-imagine npm install grunt-imagine

  grunt-contrib-imagemin

  npm install grunt-contrib-imagemin --save-dev

  grunt-asset-revisions

  npm install grunt-asset-revisions

  grunt-assets-revving

  npm install grunt-assets-revving

 

南京HTML5培训

本文由欣才IT学院整理发布,未经许可,禁止转载。