Java世界里的Maven提供了强大的包依赖管理和构建生命周期管理。在JavaScript的世界里,随着Node.js的流行,JavaScript原生的构建工具已经成为可能。
Grunt.js是基于Node.js的自动化任务运行器。Grunt.js结合NPM的包依赖管理,完全可以媲美Maven。Grunt.js天然适合前端应用程序的构建——不仅限于JavaScript项目,同样可以用于其他语言的应用程序构建。越来越多的JavaScript项目已经在使用Grunt,其中最大的使用者包括著名的jQuery项目。
Grunt的生态系统在迅速的成长,目前已经有上百种插件发布在NPM上可供选择。同时,任何人都可以方便的发布自己的插件到NPM上供其他人使用。
Grunt没有像Maven那样强调构建的生命周期,各种任务的执行顺序可以随意配置。Grunt本身仅是一个执行器,大量的功能都存在于NPM管理的插件中。特别是以grunt-contrib-开头的核心插件,覆盖了大部分的核心功能,比如handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify等。
通过提供通用的接口以进行代码规范检验(Lint)、合并、压缩、测试及版本控制等任务,Grunt使入门门槛大大降低了。
一,安装nodejs,grunt,以及grunt插件
1,安装nodejs
下载地址:https://nodejs.org/download/
2,安装grunt,以及插件
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压缩插件
grunt和grunt-cli,-g和--save-dev都安装一下,建议这样,省得出错。
3,创建工作目录
当上面的安装都结束后,node_modules里面就包含了上面安装的插件,将nodejs安装目录中的node_modules,copy到新的目录中,并创建Gruntfile.js,package.json,
在这里要注意一点,Gruntfile.js,package.json一定要与这个node_modules同一目录下,不然在调用grunt插件的时候会报错的,例如:
Local Npm module "grunt-contrib-uglify" not found. Is it installed"uglify" not found. Use --force to continue.
如果你没有装grunt-contrib-uglify插件,也会报这个错误。
二,创建Gruntfile.js和package.json
1,package.json
{ "name": "jstest", "file": "function", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~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
module.exports = function (grunt) { // grunt配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.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.template.today("yyyy-mm-dd") %> */\n' //文件顶部的注释,可自定义 }, build: { //将package.json中的file对应的文件,进行压缩并重命名 src: 'js_s/<%= pkg.file %>.js', //注意空格,官方配置例子是pkg.name dest: 'js_d/<%= pkg.file %>.min.js' //注意空格,官方配置例子是pkg.name }, buildall: {//将js_s文件夹下的所有js文件,压缩后,放到js_d文件夹中,文件名不变 files: [{ expand:true, cwd:'js_s',//js目录下 src:'**/*.js',//所有js文件 dest: 'js_d'//输出到此目录下 }] }, hebin: {//将function.js和jquery.validate.js,合并,并压缩成main.min.js files: { 'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js'] } }, ymain: {//将main.js压缩成main1.min.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文件合成一个 'css_d/main.css': ['css_s/*.css'] } }, minify: { options: { keepSpecialComments: 0, /* 删除所有注释 */ banner: '/* minified css file */' }, files: { //单个CSS文件压缩 'css_d/index.min.css': ['css_s/index.css'] } }, test: {//按文件夹下的所有CSS文件,压缩后,放到新的文件夹中,文件名不变 files: [{ expand:true, cwd:'css_s',//css目录下 src:'**/*.css',//所有css文件 dest: 'css_d'//输出到此目录下 }] } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 是否调用插件功能 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); // grunt.registerTask('default', ['uglify']); // grunt.registerTask('default', ['concat']); //grunt.registerTask('default', ['jshint']); grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用,其他功能都不起作用 }
配置文件好了以后,在命令行下,输入grunt就可以合并压缩了。上面的测试文件,基本上都是围绕着,合并与压缩来的,对于做WEB前端的来说,这个还是比较重要的。
从压缩效果来说,JS的压缩效果比较理想,CSS一般,当然,这根写的代码有关系。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- [ABC]蔡琴《百万琴歌[6N纯银镀膜]》[低速原抓WAV+CUE]
- 群星《国风超有戏 第7期》[FLAC/分轨][147.99MB]
- 群星《闪光的夏天 第3期》[320K/MP3][61.94MB]
- 群星《闪光的夏天 第3期》[FLAC/分轨][336MB]
- 【迷幻电音】Elea-2024-Hypnos(FLAC)
- 【民族融合】VA-2024-TheOrientCollective:GoldenSand(FLAC)
- 谭嘉仪-EyesOnMe新曲+精选2022【低速原抓WAV+CUE】
- 尚士达《莫回头》[320K/MP3][184.64MB]
- 尚士达《莫回头》[Hi-Res][24bit 48kHz][FLAC/分轨][1.27G]
- 群星《奔赴!万人现场 第3期》[320K/MP3][98.9MB]
- 谭嘉仪《Lonely》【WAV+CUE】
- 群星《红色钢琴浪漫曲》2CD【WAV+CUE】
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]