grunt学习笔记四:grunt实例demo
2015-11-10 18:32
567 查看
1.新建项目demo
2.在demo根目录下,创建package.json文件
eg:
{
"name":"demo",
"version":"1.0.0",
"devDependencies": {
"grunt-contrib-uglify":"~0.2.0"
}
}
2.运行npm install 生成node_modules目录,该目录包含grunt插件
3.demo根目录下,新建src目录
4.src目录中 新建测试文件hello-grunt.js
(function)($){
var str = "<p>hello grunt</p>";
$('body').append(str);
})(jQuery)
5.在demo根目录下,新建 build 目录,存放处理后的文件
6.编写 Gruntfile.js 文件
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
uglify: {
//文件头部输出信息
options: {
banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//具体任务配置
build: {
//源文件
src:'src/hello-grunt.js',
//目标文件
dest:'build/hello-grunt-min.js'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};
7.grunt 运行
2.在demo根目录下,创建package.json文件
eg:
{
"name":"demo",
"version":"1.0.0",
"devDependencies": {
"grunt-contrib-uglify":"~0.2.0"
}
}
2.运行npm install 生成node_modules目录,该目录包含grunt插件
3.demo根目录下,新建src目录
4.src目录中 新建测试文件hello-grunt.js
(function)($){
var str = "<p>hello grunt</p>";
$('body').append(str);
})(jQuery)
5.在demo根目录下,新建 build 目录,存放处理后的文件
6.编写 Gruntfile.js 文件
module.exports = function(grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
uglify: {
//文件头部输出信息
options: {
banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//具体任务配置
build: {
//源文件
src:'src/hello-grunt.js',
//目标文件
dest:'build/hello-grunt-min.js'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify']);
};
7.grunt 运行
相关文章推荐
- Junit测试用例配置Log4j
- 【开源】开发者新闻聚合APP 2.0.3发布(第二个稳定版本)
- 低23讲 项目6:前导0的数字
- Cannot change version of project facet Dynamic Web Module to 2.3.
- grunt学习笔记三:gruntfile.js-demo
- 基于Snoopy的模拟登录
- Activity 启动流程,源码分析
- 耳机的阻抗和灵敏度问题
- 使用Path语法取得对象的值
- cloudstack GuestNetwork Ingress-Egress rule
- unix文件系统常用命令
- 02(maven+SSH)网上商城项目实战之数据库设计(PMD)
- RubyGems 镜像
- 编程之美-蚂蚁爬杆方法整理
- nyoj 找球号(二) 138 (Hash表)机智 一种新思想
- php安装后,再添加模块pdo_mysql,mysqli
- react-native Requring invalid module "image! 解决办法 android
- Ubuntu 14.04 root不能登录解决办法
- 访问网络图片
- 周记(二)