grunt安装、配置、在webstrom中使用
2016-02-25 10:59
183 查看
1.全局范围安装 Grunt命令行(CLI)
Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许在同一个系统上同时安装多个版本的 Grunt。
2.安装grunt相关模块
在package.json文件中添加所需grunt模块,例如:
安装这些模块
执行完这个命令,这些插件会自动安装在node_modules目录下。
若package.json文件不存在,可以自动生成,命令:
3.配置脚本文件gruntfile.js
模块安装完成之后,在项目根目录下,新建脚本文件Gruntfile.js作为grunt的配置文件
以上做法是先合并形成一个libs,然后再将libs压缩成libs.min.js
4.执行grunt命令
也可以直接执行default:
也可以在WebStrom中,右击gruntfile.js文件名,选择Show Grunt Tasks,显示Grunt窗口。default右击选择 Run 'default'。
npm install -g grunt-cli
Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许在同一个系统上同时安装多个版本的 Grunt。
2.安装grunt相关模块
在package.json文件中添加所需grunt模块,例如:
"grunt": "^0.4.5", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-cssmin": "^0.12.3", "grunt-contrib-jshint": "^0.11.2", "grunt-contrib-uglify": "^0.9.1", "grunt-contrib-watch": "^0.6.1"
安装这些模块
npm install
执行完这个命令,这些插件会自动安装在node_modules目录下。
若package.json文件不存在,可以自动生成,命令:
npm init
3.配置脚本文件gruntfile.js
模块安装完成之后,在项目根目录下,新建脚本文件Gruntfile.js作为grunt的配置文件
module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['scripts/home.js', 'scripts/head.js', 'scripts/foot.js'], dest: 'dest/libs.js' } }, uglify: { build: { src: 'dest/libs.js', dest: 'dest/libs.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); // 默认任务 grunt.registerTask('default', ['concat', 'uglify']); };
以上做法是先合并形成一个libs,然后再将libs压缩成libs.min.js
4.执行grunt命令
grunt concat grunt uglify
也可以直接执行default:
grunt default
也可以在WebStrom中,右击gruntfile.js文件名,选择Show Grunt Tasks,显示Grunt窗口。default右击选择 Run 'default'。
相关文章推荐
- 如何使用java自定义注解?demo
- OFFICE文档(DOC,XLS,PPT)打开报错的解决办法!
- 配置caffe的python环境时make pycaffe提示fatal error: numpy/arrayobject.h No such file or directory解决方法
- Jquery zTree 树控件异步加载操作
- jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
- 【SSH项目】在线支付功能解析
- WordPress 安装后配置(主要解决加载慢)
- Linux Makefile gcc g++
- 用UIImageView实现几张图片轮转已达到动画效果
- Infopath——sum函数
- MongoDB权威指南-第7章
- 第二章 DOM初识之概念、结构、类型和节点的查找
- 算法之美_源代码发布(10)
- leetcode 35 Search Insert Position(二分法)
- fastjson的SerializerFeature
- Android动画合集之属性动画-又见
- 淘汰人工的机器时代
- python通过smtp协议发送邮件
- Linux下超级命令htop的学习使用
- 打造自己的reset.css