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的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...
随机推荐
- git第三节----git status与git diff
@ git status主要检索本地仓库的文件更新状态 @ git diff 主要是查看文件更新的具体内容 首先我们需要了解下文件状态类型,分为以追踪文件和未追踪文件 已追踪文件:在仓库之前的版本快照 ...
- 微耕N3000注入
使用ILSpy或Reflector 反编译N3000并导出解决方案,便于搜索方法代码 使用ILDASM生成中间代码D:\app\WG\AccessControl\IL\N3000.il 操作如下:(可 ...
- QQ路径
~/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/46*******/Image osx10.10.3在这 ...
- 基础环境系列:MySQL8.0.12
机型与版本:windows10(64-bits) Mysql环境配置:mysql8.0.12 一.MySQL安装 Mysql的安装有两种方法,一种是通过.msi一种是通过压缩包.穷呢,大家就老实下社区 ...
- Kotlin入门(31)JSON字符串的解析
json是App进行网络通信最常见的数据交互格式,Android也自带了json格式的处理工具包org.json,该工具包主要提供了JSONObject(json对象)与JSONArray(json数 ...
- PJSUA2开发文档--第十一章 网络问题
11 网络问题 11.1 IP地址更改 请参阅wiki 处理IP地址更改.请注意,本指南使用PJSUA API作为参考. 11.2 被阻止/过滤的网络 请参阅维基百科 通过阻止或过滤的VoIP网络
- 从0开始的Python学习002python的数据类型
在创建变量的时候不用声明数据类型 # 创建变量 a = 10 # 打印变量值 print(a) 结果如下: 这种感觉和Java有很大的不同,感觉python很神奇,数据的类型是python自己决定的. ...
- win10 家庭版不支持gpedit.msc的解决办法
win10 家庭版不支持gpedit.msc的解决办法 1.建立一个批处理文件内容如下: @echo off pushd "%~dp0" dir /b %systemroot%\W ...
- java反射(java.lang.reflect) ---普通单例模式唯一性问题
1. 普通的饱汉式.饿汉式 package org.bighead.test2; public class TestPrivate { private String str = "strPr ...
- jquery datatable 实例操作
var dataTables = $(".table").dataTable({ data: d,//为ajax的值,没有直接用插件自带的请求数据方式,个人觉得data的方式好控制 ...