Gruntfile.js模板
module.exports = function(grunt) {
// 配置项
var AppConfig = {
name: 'app',
//源文件目录
src: 'app/src',
//生产文件目录
dist: 'app/assets'
};
//加载所有的任务
require('load-grunt-tasks')(grunt);
//显示每一个任务所花的时间和百分比
require('time-grunt')(grunt);
grunt.initConfig({
config: AppConfig,
// 加载外部包列表
pkg: grunt.file.readJSON('package.json'),
// Js文件压缩
uglify: {
options: {
// 此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.author.name %>-<%=pkg.verson%> 最后修改于:<%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
options: {
// 不混淆变量名
mangle: false,
// 不删除注释,还可以为 false(删除全部注释)
preserveComments: 'false',
// 输出压缩率,可选的值有 false(不输出信息)
report: "min"
},
files: [{
expand: true,
cwd: '<%= config.dist %>/script',
src: ['**/*.js'],
dest: '<%= config.dist %>/script',
ext: '.min.js'
}, {
expand: true,
cwd: '<%= config.dist %>/plugins',
src: ['**/*.js'],
dest: '<%= config.dist %>/plugins',
ext: '.min.js'
}]
}
},
// 代码质量检查工具
jshint: {
files: ['Gruntfile.js', '<%= config.src %>/script/*.js', '<%= config.dist %>/script/*.js'],
options: {
jshintrc: '.jshintrc'
}
},
// Less编译
less: {
build: {
options: {
compress: false,
yuicompress: false
},
files: [{
expand: true,
cwd: '<%= config.src %>/less',
src: ['**/*.less'],
dest: '<%= config.dist %>/css',
ext: '.css'
}]
}
},
// Sass编译
sass: {
build: {
options: {
style: 'expanded',
sourcemap: 'none'
},
files: [{
expand: true,
cwd: '<%= config.src %>/sass',
src: ['**/*.scss'],
dest: '<%= config.dist %>/css',
ext: '.css'
}, {
expand: true,
cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/stylesheets',
src: ['**/*.scss'],
dest: '<%= config.dist %>/plugins/bootstrap/css/',
ext: '.css'
}]
}
},
//css压缩插件
cssmin: {
build: {
files: [{
expand: true,
cwd: '<%= config.dist %>',
src: ['**/*.css', '!*.min.css'],
dest: '<%= config.dist %>',
ext: '.min.css'
}]
}
},
// 图片压缩
imagemin: {
build: {
files: [{
expand: true,
cwd: '<%= config.src %>/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '<%= config.dist %>/images'
}]
}
},
// Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,保证CSS兼容性
autoprefixer: {
build: {
files: [{
expand: true,
cwd: '<%= config.dist %>/css',
src: ['*.css', '!*.min.css'],
dest: '<%= config.dist %>/css',
ext: '.css'
}]
}
},
// 依赖库自动注入
wiredep: {
build: {
// 依赖注入的页面
devDependencies: true,
src: ['<%= config.name %>/index.html'],
ignorePath: /^(\.\.\/)*\.\./,
directory: '<%= config.dist %>/script/plugins'
}
},
// 合并文件
concat: {
bootstrap: {
src: [
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/transition.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/alert.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/button.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/carousel.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/collapse.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/modal.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/popover.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/tab.js',
'<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/affix.js'
],
dest: '<%= config.dist %>/plugins/bootstrap/bootstrap.js'
}
},
// 文件复制
copy: {
build: {
files: [{
//font-awesome fonts
expand: true,
flatten: true,
cwd: '<%= config.src %>/plugins/font-awesome/fonts/',
src: ['**'],
dest: '<%= config.dist %>/plugins/font-awesome/fonts/',
filter: 'isFile'
}, {
//font-awesome css
expand: true,
flatten: true,
cwd: '<%= config.src %>/plugins/font-awesome/css/',
src: ['font-awesome.css'],
dest: '<%= config.dist %>/plugins/font-awesome/css/',
filter: 'isFile'
}, {
//bootstrap fonts
expand: true,
flatten: true,
cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/fonts/',
src: ['**'],
dest: '<%= config.dist %>/plugins/bootstrap/fonts/bootstrap/',
filter: 'isFile'
}, {
//bootstrap
expand: true,
cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/',
src: ['bootstrap.js'],
dest: '<%= config.dist %>/plugins/bootstrap/',
filter: 'isFile'
}, {
//Jquery
expand: true,
cwd: '<%= config.src %>/plugins/jquery/dist/',
src: ['jquery.js'],
dest: '<%= config.dist %>/plugins/',
filter: 'isFile'
}]
}
},
// 清理文件
clean: {
build: {
files: [{
dot: true,
src: ['.sass-cache']
}]
}
},
// 本地代理服务器
connect: {
options: {
port: ,
// 默认就是这个值,可配置为本机某个 IP,localhost 或域名
hostname: 'localhost',
// 声明给 watch 监听的端口
livereload:
},
proxies: [{
port: ,
host: '192.168.0.111',
context: '/webapi'
}],
server: {
options: {
open: true, //自动打开网页 http://
base: [
'<%= config.name %>' //主目录
]
}
}
},
// watch插件的配置信息(监控js,css文件,如改变自动压缩,语法检查)
watch: {
// 监听bower包的变化
bower: {
files: ['bower.json', 'package.json']
},
// 用于监听sass文件
sass: {
files: ['<%= config.src %>/sass/**/*.scss'],
tasks: ['sass:build', 'cssmin:build']
},
// 用于监听css文件
css: {
files: ['<%= config.dist %>/css/*.css'],
tasks: ['autoprefixer']
},
// 用于监听JS文件
js: {
files: ['<%= config.src %>/script/**/*.js'],
tasks: ['jshint', 'uglify:build'],
},
livereload: {
options: {
livereload: '<%=connect.options.livereload%>' //监听前面声明的端口 35729
},
files: [ //下面文件的改变就会实时刷新网页
'<%= config.name %>/*.html',
'<%= config.dist %>/css/{,*/}*.css',
'<%= config.dist %>/script/{,*/}*.js',
'<%= config.dist %>/images/{,*/}*.{png,jpg,gif}'
]
}
}
});
// 默认被执行的任务列表
grunt.registerTask('default', [
'dev',
'connect:server',
'watch'
]);
//发布
grunt.registerTask('build', [
'sass',
'copy',
'autoprefixer',
'cssmin',
'uglify',
'imagemin',
'clean'
]);
grunt.registerTask('dev', [
'sass',
'copy',
'autoprefixer',
'clean'
]);
};
Gruntfile.js模板的更多相关文章
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置
grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...
- 使用grunt-init自动创建gruntfile.js和package.json文件
使用grunt-init可以自动创建gruntfile.js和package.json文件.下面说一下过程: 1.全局安装grunt-init npm install -g grunt-init 2. ...
- Javascript模块化开发2——Gruntfile.js详解
一.grunt模块简介 grunt插件,是一种npm环境下的自动化工具.对于需要反复重复的任务,例如压缩.编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.grunt模块根据 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- 掌握js模板引擎
最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
随机推荐
- Java基础之 数组详解
前言:Java内功心法之数组详解,看完这篇你向Java大神的路上又迈出了一步(有什么问题或者需要资料可以联系我的扣扣:734999078) 数组概念 同一种类型数据的集合.其实数组就是一个容器. 数组 ...
- javascript基础修炼(11)——DOM-DIFF的实现
目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...
- .Net语言 APP开发平台——Smobiler学习日志:HoverBackColor属性的简单介绍
一.属性介绍 设置按钮按下时的背景色,默认设置为“Gray” 二.举例介绍 以Button控件为例 mobiler窗体设计界面见图1 将该属性设置为“255, 255, 128”,表示RGB颜色,属性 ...
- C#对象比较的总结
简单整型比较: 从这里可以看出整型比较无论是==和Equals方法都是进行比较,比较“正常” ; ; Console.WriteLine(m1 == m2);//值比较True Console.Wri ...
- [PHP] 魔术方法__get __set __sleep __wakeup的实际使用
1.__get __set是在给不可访问属性赋值和读取时,调用 2.__sleep 是在序列化对象的时候调用 3.__wakeup是在反序列化对象的时候调用 4.可以在序列化对象的时候 , 只序列化指 ...
- 委托(3).net 2.0中的委托
由于.net 2.0引入了匿名方法,所以创建委托的方式可以更简化了. .net 2.0中的委托 有了匿名方法,上一篇的例子可以简化为: namespace DelegateDemo { //声明委托 ...
- ecstore 安装后提示require function does not exist in....
解决: 安装好后,修改config.php里的TMP_DIR,指向网站目录下的data目录(用绝对路径) // define('TMP_DIR', '/data/www/data/tmp/'); 先 ...
- HTML和CSS在IE7中常见的兼容性问题
IE7及以下版本都会有这些问题 1.IE7块转内联块问题 问题描述:好像块转内联块失败,依然不在一行排列 解决办法:给元素添加如下css *display:inline;*zoom:1; *di ...
- word表格转html后去除冗余代码
word可以另存为html文件,通过这个功能,可以快速实现网页展示word内容,特别是表格的编辑,它包含tr.td.th.rowspan.colspan等内容,直接写比较繁琐. 但word转换过来的h ...
- 怎么打开iPhone的开发者模式
1.需要连接Xcode 2.打开一个app就有了