Grunt完整打包一个项目实例
2015-05-29 18:07
423 查看
Grunt确实好用,配置好Gruntfile.js之后,一个命令就行云如流水,程序帮你搞定一切,爽歪歪。
我们先看压缩前的目录:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/02/020d1aa3495eb8b71a31197d6723ac95.png)
再看打包后的目录:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/02/055272b08ac311d138a52311b4a5a065.png)
build是打包后的文件夹,main.css是压缩后的,build/js下的文件也是压缩后的,build下的html也是压缩后的,减少了很多人工打包的工作。
OK,来看下我们的核心Gruntfile.js文件,打包的流程配置都是在这个里面完成。
按照这个配置大家就可以自动化打包自己的项目咯。
我们先看压缩前的目录:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/02/020d1aa3495eb8b71a31197d6723ac95.png)
再看打包后的目录:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/02/055272b08ac311d138a52311b4a5a065.png)
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']); }
按照这个配置大家就可以自动化打包自己的项目咯。
相关文章推荐
- 给onScroll减减压
- command 实现jar的守护
- 开发nodejs模块并发布到npm的简单示例(win7)
- build path entry is missing
- 用正则表达式在注册页面(js/aspx.cs)的验证
- mvc服务端验证与客户端验证结合起来.......
- IOS CopyPNGFile 异常问题解决
- hadoop2.x MapReduce过程
- onchange事件与onpropertychange事件的区别
- 关于Android的TextView组件的ellipse属性的分析
- 《将博客搬至CSDN》
- Java用Scanner类获取用户输入
- 第1阶段冲刺成果—简单运算game(APP)
- 黑马程序员-面向对象三大特性之封装
- Android TV 开发相关文章
- 公司外部系统用Phalcon,内部系统用Laravel
- 分离字符串数字并计算其和
- 装Ubuntu15.04的一些经验
- csdn
- 将备份数据传输到远程服务器