Grunt完整打包一个项目实例
Grunt确实好用,配置好Gruntfile.js之后,一个命令就行云如流水,程序帮你搞定一切,爽歪歪。
我们先看压缩前的目录:
再看打包后的目录:
build是打包后的文件夹,main.css是压缩后的,build/js下的文件也是压缩后的,build下的html也是压缩后的,减少了很多人工打包的工作。
OK,来看下我们的核心Gruntfile.js文件,打包的流程配置都是在这个里面完成。
module.exports = function(grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: { //清除目标文件下文件
payment: {
src: "payment/build"
}
},
copy: {
payment: {
expand: true,
cwd: 'payment/src',//源文件路径
src: '**',//源文件目录下的所有文件
dest: 'payment/build/',//目标文件路径,把源文件下的文件复制到该目录下
flatten: false,//用来指定是否保持文件目录结构
filter: 'isFile',
},
},
uglify: {//压缩js文件
payment: {
files: [{
expand: true,
cwd: 'payment/src/js', //js源文件目录
src: '*.js', //所有js文件
dest: 'payment/build/js' //输出到此目录下
}]
}
},
// sass: {
// payment: {
// files: [{
// expand: true,
// cwd: 'src',
// src: ['*.scss'],
// dest: 'payment/build',
// ext: '.css'
// }]
// }
// },
cssmin: { //压缩css
payment: {
"files": {
'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件
}
}
},
htmlmin: { //压缩html
payment: {
options: { // Target options
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true, // Enable dynamic expansion.
cwd: 'payment/src', // Src matches are relative to this path.
src: ['*.html'], // Actual pattern(s) to match.
dest: 'payment/build/', // Destination path prefix.
ext: '.html', // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
}]
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
// grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 默认任务
grunt.registerTask('payment', ['clean:payment','copy:payment', 'uglify:payment', 'cssmin:payment', 'htmlmin:payment']);
}
按照这个配置大家就可以自动化打包自己的项目咯。
Grunt完整打包一个项目实例的更多相关文章
- 杂项-Grunt:grunt build 打包和常见错误
ylbtech-杂项-Grunt:grunt build 打包和常见错误 1. 安装.打包返回顶部 1. npm WARN deprecated coffee-script@: CoffeeScrip ...
- 打包一个python解释器
利用python的exec语句,可以很方便地动态执行python语句.如果一个python代码打包为了exe,其原先的代码就很难更改了.一个好的解决方法就是import相应的库,然后把主程序段放到一个 ...
- 使用Grunt 插件打包Electron Windows应用
最近利用Electron来创建跨桌面应用的趋势似乎很火.看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目 ...
- jenkins+svn完整打包并上传到linux服务器上
因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...
- grunt前端打包——css篇
[导读] 前端打包的工具有很多,我用的习惯的就是这个grunt,无论是你要在github上做开源,还是让自己的项目变得更易于维护,grunt都是首选. 前端打包的工具有很多,我用的习惯的就是这个gru ...
- 完整搭建一个vue项目
目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node ...
- 支持JDK19虚拟线程的web框架,之二:完整开发一个支持虚拟线程的quarkus应用
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇是<支持JDK19虚拟线程的web ...
- webpack 打包一个简单react组件
安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...
- [Android Pro] Android打包一个Apk后,如何查看它的VersionCode、VersionName 等等。
Android打包成Apk后,其实是一个压缩文件,我们用winrar打开也能看到里面的文件结构.还能看到AndroidManifest.但是里面的内容有点问题. 不知道是因为加密还是Android就是 ...
随机推荐
- java学习笔记_多态
多态:父类的变量可以引用子类的对象 引用: Student s1 = stu; s1.setScore(200); 1.一个对象可以有多个引用,可以有多个变量操作同一个对象 2.当一个对象没有任何 ...
- mysql5.7解压版版安装步骤详情
mysql有安装版和解压版之分: 安装版:以msi结尾的,这种版本优点是安装便捷,全是傻瓜式的下一步:缺点是会不自觉的安装一些我们根本不需要的组件. 解压版:以zip或者其他压缩格式结尾的,这种版本虽 ...
- 【手记】如果Idx/Sub字幕导不进MKVToolNix,看看是否这个原因
用记事本之类的文本编辑器打开idx文件,看看时间轴部分是不是存在不规范的条目,比如: timestamp: :::, filepos: 注意,上述条目中,filepos:后面缺了一个空格,就这么一处问 ...
- Rstudio常用且不熟快捷键 “原版+中文” 整理
- Oracle递归查询(start with…connect by prior)
查询基本结构: select … from table_name start with 条件1 connect by 条件2 1.建测试用表 create table test ...
- V1-bug Alpha阶段发布说明
V1-bug Alpha阶段发布说明 欢迎使用WEDO创意社区(部署IP为:60.205.230.0) WHAT'S WEDO 这是一个致力于创意发布.合作开发的网站. 模块 功能 注册 添加新账号 ...
- CentOS&.NET Core初试-2-安装.NET Core SDK和发布网站
系列目录 CentOS的安装和网卡的配置 安装.NET Core SDK和发布网站 Nginx的安装和配置 安装守护服务(Supervisor) 安装.NET Core SDK 注册Microsoft ...
- Oracle PL/SQL编程之过程
1.简介 过程用于执行特定的操作,当建立过程时,既可以指定输入参数(in),也可以指定输出参数(out),通过在过程中使用输入参数,可以将数据传递到执行部分,通过使用输出参数,可以将执行部分的数据传递 ...
- Oracle 维护数据的完整性 一 约束
简介:约束用于确保数据库满足特定的商业规则.在Oracle中,约束包括以下几种: 1.not null 非空约束 该劣质不能为null 2.unique 唯一约束 ...
- django notes 三:Template 的查找
django 中有 2种 Template Loader django.template.loaders.filesystem.Loader django.template.loaders.app_d ...