Grunt打包前端代码教程

2024-01-03 06:32

本文主要是介绍Grunt打包前端代码教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


详细教程

http://blog.csdn.net/wangfupeng1988/article/details/46418203/



过程:


1.安装node.js


2.兴建 Grunt项目
包含:
F:\App\grunt_test

package.json:

{"name": "grunt_test","version": "0.1.0","devDependencies": {"grunt": "^0.4.5","grunt-contrib-clean": "latest","grunt-contrib-concat": "^1.0.1","grunt-contrib-copy": "latest","grunt-contrib-cssmin": "^2.2.0","grunt-contrib-htmlmin": "latest","grunt-contrib-jshint": "^1.1.0","grunt-contrib-requirejs": "latest","grunt-contrib-sass": "*","grunt-contrib-uglify": "^3.0.0","grunt-contrib-watch": "*","grunt-cssc": "*","grunt-htmlhint": "*","grunt-usemin": "latest","matchdep": "*"},"main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "huzhao","license": "ISC"
}



Gruntfile.js:

module.exports = function(grunt) {grunt.initConfig({pkg: grunt.file.readJSON('package.json'),concat: {options: {separator: ';'},dist: {src: ['src/**/*.js'],dest: 'dist/<%= pkg.name %>.js'}},uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'},dist: {files: {'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']}}}});grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-concat');grunt.registerTask('default', ['concat', 'uglify']);};



3.安装 Grunt及相关插件

cmd命令行

npm install grunt -g  //安装grunt,-g全局变量
npm install grunt-cli -g //安装grunt命令行
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录
npm install grunt-cli --save-dev //安装grunt命令行
npm install grunt-contrib-jshint --save-dev //js语法检测插件
npm install grunt-contrib-concat --save-dev //js合并插件
npm install grunt-contrib-uglify --save-dev //js压缩插件
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件 

4.实例学习:打包zepto

http://www.cnblogs.com/yexiaochai/p/3603389.html


1.在项目里新建src文件夹

放入要压缩的目标文件


2.cmd 执行 grunt命令


3.结果图


总结:

1.压缩文件路劲设置

Gruntfile.js里

2.压缩文件命名

package.json里

3.grunt 相关插件配置

package.json里


完整项目

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: { //压缩csspayment: {"files": {'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件}}},htmlmin: { //压缩htmlpayment: {options: { // Target optionsremoveComments: 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打包前端代码教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/564788

相关文章

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

golang程序打包成脚本部署到Linux系统方式

《golang程序打包成脚本部署到Linux系统方式》Golang程序通过本地编译(设置GOOS为linux生成无后缀二进制文件),上传至Linux服务器后赋权执行,使用nohup命令实现后台运行,完... 目录本地编译golang程序上传Golang二进制文件到linux服务器总结本地编译Golang程序

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)