grunt使用方式
来源:互联网 发布:淘宝手机店铺装修代码 编辑:程序博客网 时间:2024/06/06 12:53
一、Grunt是基于Node.js基础上运行的。需要能正常运行Grunt,必先在你的系统上正确安装Node.js和NPM。如下图安装成功:
二、通过npm安装grunt(grunt有Server版本和Client版本这里安装Client)安装命令:npm install -g grunt-cli//直接复制到cmd命令提示行下成功提示:C:\Users\hehua\AppData\Roaming\npm\node_modules路径下存在 grunt-cli 文件夹注意:AppData目录找不到,在工具里面设置显示隐藏文件夹。
三、创建自己的项目文件夹 1.在电脑I盘创建,项目文件夹 zyn66 2.运行grunt是项目文件里面必须存在Gruntfile.js和package.json文件,可以直接从 C:\Users\hehua\AppData\Roaming\npm\node_modules\grunt-cli路径下复制这两个文件。 里面内容比较多,清楚里面内容。 /**package.json**/ module.exports = function(grunt) { // 构建任务配置 grunt.initConfig({ //读取package.json的内容 pkg: grunt.file.readJSON('package.json'), uglify: { //下面的内容会在新生成的文件里显示出来。类死于jsp写法 options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, //具体任务配置,名字可以自定义如:builda buildall //下面代码作用通过插件将src下的demo.js文件,重新生成输出到dest下demo-min.js(保留源文件) build: { //源文件 src: 'src/grunt.js', //目标文件 dest: 'build/grunt-min.js' } } }); // 加载指定插件任务 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认执行的任务 grunt.registerTask('default', ['uglify']);};/**package.json(项目描述文件)**/{ "name": "zyn", //创建者 "version": "0.1.0", 、、创建版本 "description": "this is test project with grunt.", //项目描述 "author": "airen", "license": "BSD", "devDependencies": { //项目依赖插件在这里提现 }}/**将文件内容复制到项目文件夹根目录**/
四、安装插件(这里示范js压缩插件)通过cmd渐入项目根目录//安装插件grunt,并会自动添加到package.json下面的devDependencies里面npm install grunt --save-dev //安装压缩js插件npm install grunt-contrib-uglify --save-dev
五、完成后会在项目根目录产生node_modules文件夹,里面包括刚才安装的插件grunt和grunt-contrib-uglify 现在安装完毕 在cmd项目跟路径下执行 /**uglify来自于package.json的配置项**/ grunt uglify
最后,项目根目录下会产生build文件夹里面包含文件grunt-min.js文件。
参考地址:
http://www.hulufei.com/post/grunt-introduction#plugin
http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
0 0
- grunt使用方式
- Grunt-Grunt使用
- grunt使用
- grunt使用
- grunt使用
- grunt 使用
- grunt的grunt-contrib-jshint插件使用
- grunt的grunt-contrib-concat插件使用
- 使用Grunt构建项目
- Grunt使用示例
- grunt安装使用
- grunt使用 CLI
- 安装及使用grunt
- Grunt使用记录
- grunt使用笔记
- grunt使用小结
- grunt使用小记
- Grunt使用初步
- phpwind < v6 版本命令执行漏洞
- Oracle数据库管理
- php session 过期时间设置
- 关于xcode不同版本打开相同工程问题
- Qt做的俄罗斯方块游戏
- grunt使用方式
- 一些VR延迟优化方法
- TinyOS视频第一集内容介绍
- Qt平台下的精简版俄罗斯方块,代码80行(顺便散点分) [问题点数:40分,结帖人lxyppc]
- Android-SDK无法更新的问题解决
- ListView item加载不同的布局
- unity中控制主角的移动和旋转
- 字符串解析
- android系统架构