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就是 ...
随机推荐
- vue-cli中的webpack打包配置
如下: assetsSubDirectory: 'static', assetsPublicPath: '/projectName/', 其中assetsSubDirectory是代表服务器上的实际路 ...
- mysql查询语句常用字段操作函数
一.concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字符串,如果有任何一个参数为null,则返回值为nu ...
- [spring] Ioc 基础
Ioc的理解:调用类对某一接口的实现类的依赖关系又第三方注入,以移除调用类对接口实现类的依赖.又叫做依赖注入.调用者对接口的选择权利被剥夺,交给了第三方.举个例子,学生本来可以选择哪个老师给他上课的, ...
- df -h 卡死 如何解决
df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...
- Thread类和Runnable接口的比较
Thread和Runnable的联系 Thread类的定义: public class Thread extends Object implements Runnable 联系:从Thread类的定义 ...
- 2019年华南理工大学程序设计竞赛(春季赛) K Parco_Love_String(后缀自动机)找两个串的相同字串有多少
https://ac.nowcoder.com/acm/contest/625/K 题意: 给出Q 个询问 i , 求 s[0..i-1] 与 s[i...len-1] 有多少相同的字串 分析: 给出 ...
- 关于DES加密强制更新版(4.22)
数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...
- 《大数据日知录》读书笔记-ch16机器学习:分布式算法
计算广告:逻辑回归 千次展示收益eCPM(Effective Cost Per Mille) eCPM= CTR * BidPrice 优化算法 训练数据使用:在线学习(online learning ...
- Python时间time模块介绍
一.明确时间元组 二.测试代码#!/usr/bin/env python # -- coding: utf-8 --' """ 时间模块,time的相关操作与测试 &qu ...
- 解决JavaScript拖动时同时触发点击事件的BUG
在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...