Grunt自动化部署css,js,image,html等(附视频)

本文转载自:http://www.haorooms.com/post/grunt_css_html_bs

其实,grunt有很多很多插件,上次我也给大家讲了,grunt的应用,很大程度是grunt插件的应用!
上节课,我载入模块是这么写的!
//载入concat和uglify插件,分别对于合并和压缩

  //载入concat和uglify插件,分别对于合并和压缩
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

本节课,我引用了matchdep这么一个模块,当然,这个模块是要在package.json中配置,关于package.json有哪些字段,请看这边博客!https://github.com/ericdum/mujiang.info/issues/6
这里面对package.json字段做了一些介绍。个人感觉还可以!
引用了这个模块之后,我们grunt载入插件紧要一句就可以了!如下:

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

其他的写法和上节课给大家介绍的差不多!
关于插件的字段介绍,我这里就不一一列举了,例如,html的压缩htmlmin,具体的字段可以查看:https://github.com/kangax/html-minifier#options-quick-reference
html解析的插件grunt-usemin的具体介绍请看:
https://www.npmjs.com/package/grunt-usemin
那关于图片压缩、imagemin的具体介绍请看:
https://www.npmjs.com/package/grunt-contrib-imagemin
视频教程:
grunt自动化部署

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,179评论 19 139
  • (一)演示项目目录结构 可以使用淘宝的 npm 镜像来代替官方版本(镜像同步频率目前为 10分钟 一次以保证尽量与...
    咚门阅读 10,748评论 5 34
  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    aimaile阅读 26,761评论 6 427
  • 大龄,其实不知道大家的定义里,怎样才算大龄,不过我想无论怎样算,我这个88年的都应该是了吧。 其实,我从不觉得年龄...
    天然之乐阅读 3,211评论 11 1
  • 我要结婚了 当丁晓琪拎着形形色色的包跨进我办公室门时我就又被提醒了一次——高达真要有高太太了,因为想过一辈子寡然此...
    蒙初凝琪阅读 3,311评论 0 7

友情链接更多精彩内容