宝哥软件园

学习如何使用grunt打包JavaScript和CSS程序的教程

编辑:宝哥软件园 来源:互联网 时间:2021-09-19

Java世界中的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里,随着Node.js的流行,构建一个原生的JavaScript工具已经成为可能。

Grunt.js是一个基于Node.js的自动化任务运行器,结合了NPM的包依赖管理,完全可以和Maven媲美。Grunt.js自然适合构建前端应用程序。——不仅限于JavaScript项目,还可以用于构建其他语言的应用程序。Grunt已经被越来越多的JavaScript项目使用,其中最大的用户包括著名的jQuery项目。

Grunt的生态系统正在快速增长,NPM已经发布了数百个插件可供选择。与此同时,任何人都可以轻松地将其插件发布到NPM,供他人使用。

Grunt不像Maven那样强调构建的生命周期,各种任务的执行顺序可以随意配置。Grunt本身只是一个执行器,很多功能都存在于NPM管理的插件中。尤其是以grunt-contrib开头的核心插件,覆盖了大部分核心功能,比如车把、jade、less、compass、jshint、jasmine、clean、concat、minify、copy、uglify、watch、minify、uglify等等。

通过提供一个通用接口来执行代码规范检查(Lint)、合并、压缩、测试和版本控制等任务,Grunt大大降低了进入门槛。

1.安装nodejs、grunt和grunt插件1。安装nodejs下载地址:https://nodejs.org/download/.

2.安装grunt和插件。

NPM install grunt-g//install grunt,-g全局变量NPM install grunt-CLI-g//install grunt命令行NPM install grunt-save-dev///install grunt。-save-dev到安装目录NPM安装grunt-CLI-save-dev//安装grunt命令行NPM安装grunt-contrib-js hint-save-dev//语法检测插件NPM安装grunt-contrib-concat-save-dev//js合并插件NPM安装grunt-contrib-uglify-save-dev//js压缩插件NPM安装grunt-contrib-csmin-save-dev//CSS压缩插件grunt和grunt-CLI,-g和-save-dev全部安装完毕。建议这样做,以免出错。3.创建一个工作目录当上述所有安装完成后,上面安装的插件包含在node_modules中。将nodejs安装目录中的node_modules复制到一个新的目录中,创建gum file . js和package.json,这里需要注意的是,gum file . js和Package.json必须和这个node_modules在同一个目录中,否则会调用Grunt插件。

找不到本地Npm模块“grunt-contrib-uglify”。安装了吗?警告:找不到任务“丑陋”。使用-force继续。如果您没有安装grunt-contrib-uglify插件,您也会报告这个错误。

第二,创建Gruntfile.js和package.json1,package.json。

{ 'name': 'jstest ',' file': 'function ',' version': '0.1.0 ',' devDependencies ' : { ' Grunt ' : ' ~ 0 . 4 . 5 ',Grunt-contrib-js hint ' : ' ~ 0 . 11 . 3 '。//后面的数字是版本号。您可以在每个插件目录下的package.json中找到' grunt-contrib-concat ' : ' ~ 0 . 5 . 1 '。grunt-contrib-uglify ' : ' ~ 0 . 9 . 2 ',' grunt-contrib-cssmin ' : ' ~ 0 . 14 . 0 ' } } 2,Gruntfile.js

模块。exports=function(grunt){//grunt配置咕噜。initconfig({ pkg : grunt。文件。readjson('包。JSON’),concat : { options : { separator : };},dist : { src : [' js _ s/function。js ',' js_s/jquery.validate.js'],dest: 'js_d/main.js' //合并不压缩} },uglify : { options : { banner : '/*!%=pkg。name % %=grunt。模板。今日(' yyyy-mm-DD ')% */ n '//文件顶部的注释,可自定义},build: { //将package.json中的文件对应的文件,进行压缩并重命名src: 'js_s/%=pkg.file % .js ',//注意空格,官方配置例子是pkg。name dest : ' js _ d/%=pkg。文件%。量滴js '//注意空格,官方配置例子是pkg.name },buildall: {//将js_s文件夹下的所有射流研究…文件,压缩后,放到js_d文件夹中,文件名不变文件:[{ expand 3360 true,cwd: ' js _ s ',//js目录下src:'**/* .js ',//所有射流研究…文件dest: 'js_d'//输出到此目录下}] },hebin: {//将function.js和jquery.validate.js,合并,并压缩成main.min.js文件: { ' js _ d/main。量滴js ' :[' js _ s/function。js ',' js_s/jquery.validate.js'] },ymain: {//将main.js压缩成主要1。量滴js src : ' js _ d/main。js ',dest: 'js_d/main1.min.js' },jshint: { //检查,function.js是不是有语法错误all: ['js_s/function.js'] },cssmin : { combine : { files : {//将css_s文件夹下的钢性铸铁文件合成一个css_d/main.css': ['css_s/* .css'] } },minify : { options : { keepspecialcomments 3360 0,/*删除所有注释*/banner: '/*缩小的钢性铸铁文件*/' },文件: { //单个半铸钢钢性铸铁(铸造半钢)文件压缩CSS _ d/索引。量滴CSS ' :[' CSS _ s/index。CSS ']} },test: {//按文件夹下的所有半铸钢钢性铸铁(铸造半钢)文件,压缩后,放到新的文件夹中,文件名不变文件:[{ expand 3360 true,cwd: ' css _ s ',//css目录下src:'**/* .css ',//所有钢性铸铁文件dest: 'css_d'//输出到此目录下}] } } });//加载插件咕噜。loadnpmttasks(' grunt-contrib-uglify ');咕噜。loadnpmtasks(' grunt-contrib-concat ');咕噜。loadnpmtasks(' grunt-contrib-js提示');咕噜。loadnpmttasks(' grunt-contrib-cssmin ');//是否调用插件功能//grunt.registerTask('default ',['concat ',' uglify ',' jshint ',' cssmin ']);//grunt.registerTask('default ',[' uglify ']);//grunt.registerTask('default ',[' concat ']);//grunt.registerTask('default ',[' js提示']);grunt.registerTask('default ',[' cssmin ']);//CSSMIN插件的功能能用,其他功能都不起作用} 配置文件好了以后,在命令行下,输入咕哝就可以合并压缩了。上面的测试文件,基本上都是围绕着,合并与压缩来的,对于做网前端的来说,这个还是比较重要的。从压缩效果来说,JS的压缩效果比较理想,CSS一般,当然,这根写的代码有关系。

201614144620000.gif  (30051)

更多资讯
游戏推荐
更多+