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模板的更多相关文章

  1. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  2. Grunt 自动化部署之css、image、javascript、html压缩Gruntfile.js配置

    grunt.initConfig方法 用于模块配置,它接受一个对象作为参数.该对象的成员与使用的同名模块一一对应. 每个目标的具体设置,需要参考该模板的文档.就cssmin来讲,minify目标的参数 ...

  3. 使用grunt-init自动创建gruntfile.js和package.json文件

    使用grunt-init可以自动创建gruntfile.js和package.json文件.下面说一下过程: 1.全局安装grunt-init npm install -g grunt-init 2. ...

  4. Javascript模块化开发2——Gruntfile.js详解

    一.grunt模块简介 grunt插件,是一种npm环境下的自动化工具.对于需要反复重复的任务,例如压缩.编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作.grunt模块根据 ...

  5. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  6. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  7. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  8. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  9. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

随机推荐

  1. -1-5 java 多线程 概念 进程 线程区别联系 java创建线程方式 线程组 线程池概念 线程安全 同步 同步代码块 Lock锁 sleep()和wait()方法的区别 为什么wait(),notify(),notifyAll()等方法都定义在Object类中

     本文关键词: java 多线程 概念 进程 线程区别联系 java创建线程方式 线程组 线程池概念 线程安全 同步 同步代码块 Lock锁  sleep()和wait()方法的区别 为什么wait( ...

  2. 关于HTML相关知识随记

    HTML是构成网页文档的主要语言,它由HTML标签和字符信息组成.HTML标签可以标识文字.图形.动画.声音.表格.超链接等网页对象,字符信息用以传达网页内容,如标题.段落文本.图像等. HTML4文 ...

  3. Redux进阶(像VUEX一样使用Redux)

    更好的阅度体验 前言 redux的问题 方案目标 如何实现 思考 前言 Redux是一个非常实用的状态管理库,对于大多数使用React库的开发者来说,Redux都是会接触到的.在使用Redux享受其带 ...

  4. .net 用ajaxFileUpload 上传超过20M文件设置

    1.在web.config的 <system.web>  节点里面添加   <httpRuntime targetFramework="4.5.2"  execu ...

  5. MySQL高级特性之分区表

    对于用户而言,分区表是一个独立的逻辑表,但是在底层由多个物理子表组成.实现分区的代码实际上是对一组底层表的句柄对象的封装,对分区表的请求都会通过句柄对象转化成对存储引擎的接口调用 意义 MySQL在创 ...

  6. Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include().

    Django的urls.py加载静态资源图片,TypeError: view must be a callable or a list/tuple in the case of include(). ...

  7. Linux 监控CPU、内存、IO

    安装说明 # tar zxvf sysstat-11.5.6.tar.gz# cd sysstat-11.5.6# ./configure# make# make install 备注:若在linux ...

  8. Android Activity生命周期图解

    Android activity的生命周期这一张图就够了. 验证结果: 值得注意的是从activity A--->activity B是先执行A的onPause然后走B的生命周期最后才走A的on ...

  9. idea部署Maven入门(一)——环境变量的配置和下载

        介绍:       1  Maven是用来管理jar包的一种工具,       2  Maven主要是构建java项目和java web项目        3 maven项目管理所依赖的jar ...

  10. SQL Server Mirror 断开后,删除副本上镜像数据库

    一般而言,SQL Server 在数据库级别进行数据同步的方式主要有三种 1.日志传送:2.Mirror(镜像):3. AlwaysOn.复制订阅技术理解为表级别的同步,不归结为数据库级别的同步. 在 ...