关于Grunt压缩CSS和HTML的实例交汇处能-html教程

我的小伙伴们!我明明 在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了!

没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建工具.让我来一个官方的回答:

一句话:就是自动化,对于需要反复的任务,例如压缩,编译,单元测试.linting等,自动化工具可以减轻你的劳动,简化

你的工作.当你在Gruntfile文件确定配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作.

下面咱们来快速入门一下:

Grunt和Grunt插件是通过npm安装并管理的,npm是Node.js的包管理器.所以也就是说,想要安装Grunt就必须要安装Node,想要安装Grunt就必须要安装Node,想要安装Grunt就必须要安装Node重要的事情说三遍! ٩(๑>◡<๑)۶

你需要先将Grunt命令行(cli)安装到全局环境中.安装时可能需要使用sudo权限或者作为管理员来执行以下命令,

都弄好之后:咱们就开始敲代码吧:

module.exports = function(grunt){//1.引入grunt.loadNpmTasks(&＃39;grunt-contrib-cssmin&＃39;);grunt.loadNpmTasks(&＃39;grunt-contrib-htmlmin&＃39;); //2.设置任务:    grunt.initConfig({//        //压缩CSS        cssmin:{
            yasuo:{
                options:{
                    mangle:false},
                expand: true,
                cwd: &＃39;css&＃39;,//压缩那个文件夹里的文件
                src:&＃39;*.css&＃39;,//压缩那个文件
                dest:&＃39;yscss&＃39;,放压缩后文件的文件夹
                ext:&＃39;.min.css&＃39;压缩后文件的的名字}
        },//        //压缩HTML        htmlmin:{
            options: {
                    removeComments: true, //移除注释removeCommentsFromCDATA: true,//移除来自字符数据的注释collapseWhitespace: true,//无用空格collapseBooleanAttributes: true,//失败的布尔属性removeAttributeQuotes: true,//移除属性引号      有些属性不可移走引号removeRedundantAttributes: true,//移除多余的属性useShortDoctype: true,//使用短的跟元素removeEmptyAttributes: true,//移除空的属性removeOptionalTags: true//移除可选附加标签                  },
            yasuo:{
                expand: true,
                cwd: &＃39;index&＃39;, 
                src: [&＃39;*.html&＃39;],
                dest: &＃39;yshtml&＃39;}
        }


    });//设置默认任务grunt.registerTask(&＃39;default&＃39;,[&＃39;cssmin&＃39;,&＃39;htmlmin&＃39;]);
}

然后,Win+r调出命令行.

输入 grunt 按回车

看到这样的结果,就成功了!!

懂了吗?

以上就是关于Grunt压缩CSS和HTML的实例交汇处能的详细内容，更多请关注 第一PHP社区 其它相关文章！