使用grunt-hub实现多个grunt项目一次运行
来源:互联网 发布:日程提醒软件app 编辑:程序博客网 时间:2024/06/08 17:57
作为前端开发人员,grunt是一个非常好的自动化工具,可以简化你的工作,减轻你的劳动。而且grunt提供了数量庞大的插件供使用。
首先,简单安装grunt(首先需要安装node及npm环境):
1、安装全局 grunt-cli:
npm install -g grunt-cli
2、新建项目及添加配置文件: package.json;此文件放置于根目录,并与gruntfile.js文件处于同一目录,主要用于存储需要依赖的npm模块及grunt插件模块,如:
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1" }}
如果你有node项目,也使用了package.json文件,则可以使用同一个;
3、安装grunt:
在项目目录,使用以下命令进行安装:
npm install grunt --save-dev
4、安装grunt插件:
在这里,就使用js及css压缩及使用grunt-hub进行多个grunt项目实现。
首先安装grunt-hub:
npm install grunt-hub --save-dev
安装css压缩插件:
npm install grunt-contrib-cssmin --save-dev
安装js压缩插件:
npm install grunt-contrib-uglify --save-dev
安装完后,就开始配置gruntfile.js文件,根据每个插件的api进行相关的配置。
下面开始使用grunt-hub完成多个grunt文件一次性执行:
在项目下创建grunt文件夹,用于存放所有grunt配置文件,尤其对于较大项目时,可以将整个grunt按一定方式分开,再统一执行。下面,我们将js及css压缩分开执行进行说明:
1、在grunt文件夹下,首先创建gruntJs.js文件夹,用于打包压缩js文件:
module.exports = function(grunt) { grunt.initConfig({ uglify: { js: { files: { '../public/js/main.min.js': [ '../public/js/common.js', ] } } } }); grunt.loadTasks('../node_modules/grunt-contrib-uglify/tasks'); grunt.registerTask('default', [ 'uglify']);};
这里,使用的是grunt-contrib-uglify进行压缩,具体用法可以参照grunt-contrib-uglify使用;
2、在grunt文件夹下创建gruntCss.js文件,用于打包压缩css文件:
module.exports = function(grunt) {
grunt.initConfig({
cssmin: {
js: {
files: {
‘../public/css/main.min.css’: [
‘../public/css/custom.css’,
‘../public/css/style.css’
]
}
}
}
});
grunt.loadTasks(‘../node_modules/grunt-contrib-cssmin/tasks’);
grunt.registerTask(‘default’, [ ‘cssmin’]);
};
这里,使用的是grunt-contrib-cssmin进行压缩,具体用法可以参照grunt-contrib-cssmin使用;
3、在根目录下,创建Gruntfile.js文件,此文件为grunt入口文件,也是启动文件,内容如下:
module.exports = function(grunt) {
grunt.initConfig({
hub: {
all: {
src: [‘./grunt/gruntCss.js’, ‘./grunt/gruntJs.js’],
//tasks: [‘jshint’, ‘nodeunit’],
}
}
});
grunt.loadNpmTasks(‘grunt-hub’);
grunt.registerTask(‘default’, [ ‘hub’]);
};
这里,使用了grunt-hub文件,在里面有src参数,可以设置需要执行的grunt文件的相对地址,而且还有一个tasks参数,可以不用设置,如果不设置,则是自动执行每个地址下grunt文件里的default任务,如果设置,则是执行设置的任务。
完成后,在项目下打开命令行,执行
grunt
后,便可以将js及css进行压缩打包了。
- 使用grunt-hub实现多个grunt项目一次运行
- 使用Grunt构建项目
- Grunt-Grunt使用
- 使用Grunt启动和运行
- 使用grunt实现css压缩
- grunt使用
- grunt使用
- grunt使用
- grunt 使用
- grunt
- grunt
- Grunt
- Grunt
- grunt
- grunt
- Grunt
- grunt
- Grunt
- 一个很有借鉴价值的编程故事
- 简易时光轴实现
- POJ--2184--Cow Exhibition--01背包
- HDU 1298 - T9(trie树)
- 用jspSmartUpload控件上传文件,其他参数值为null的问题解决
- 使用grunt-hub实现多个grunt项目一次运行
- Unity3D学习之(类和方法)
- 并行编程中的设计模式
- Vs2012在Linux开发中的应用(10): 参数转换
- 程序备份数据库
- IO端口 和 IO 内存
- 第三章
- 继iptables之后的新一代包过滤框架是nftables
- 关于二分法查找