正文

grunt压缩html和css

++码园++  2022-02-09  590

关键词：

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

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

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

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

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

上述命令执行完后,Grunt命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了.

注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的Grunt同时安装在同一台机器上了,

同样,Grunt插件和其他node模块都可以按相同的方式安装.下面展示的实例就是安装htmlmin任务模块的:

再来一个cssmin任务模块的:

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

module.exports = function(grunt){
    //1.引入
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); //2.设置任务:
    grunt.initConfig({
//        //压缩CSS
        cssmin:{
            yasuo:{
                options:{
                    mangle:false
                },
                expand: true,
                cwd: 'css',//压缩那个文件夹里的文件
                src:'*.css',//压缩那个文件
                dest:'yscss',放压缩后文件的文件夹
                ext:'.min.css'压缩后文件的的名字
            }
        },
//        //压缩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: 'index', 
                src: ['*.html'],
                dest: 'yshtml'
            }
        }


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

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

输入 grunt 按回车

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

使用 Grunt 压缩 HTML 中的类名和 id

】使用Grunt压缩HTML中的类名和id【英文标题】：CompressingclassnamesandidsinHTMLwithGrunt【发布时间】：2015-03-0719:15:27【问题描述】：<divclass="aAAJ-KU-JgJ-KU-Jg-K9"></div>Gmail使用的这种压缩方法的名称是什么，是否有用于它的grunt模块... 查看详情

grunt合并压缩js和css文件

具体node及文件配置请看：grunt安装使用（一）要压缩的文件--src/ajax.jsassets.jstouch.jszepto.js 目录结构：dist/node_modules/src/Gruntfile.jspackage.jsonpackage.json是依赖库文件Gruntfile.js是执行步骤程序一、js合并压缩第一次需要... 查看详情

grunt的配置及使用（压缩合并js/css）

Grunt的配置及使用（压缩合并js/css）安装前提是你已经安装了nodejs和npm。你能够在 nodejs.org 下载安装包安装。也能够通过包管理器（比方在 Mac 上用 homebrew，同一时候推荐在 Mac 上用 homebrew）。&n... 查看详情

grunt的用法

以下是压缩js,css和css合并,html,img,js语法检查　　要想实现这些，需要在命令行里下载：　　　　js: npminstall grunt-contrib-uglify--save-dev　　　　css: npminstall grunt-contrib-cssmin --save-dev　　　　　　 npminstall& 查看详情

sass编译css/grunt压缩文件

Sass安装（mac）$sudogeminstallsassscss编译成css文件$sassui.scssui.cssCLI安装$npminstall-ggrunt-cliGrunt安装$npminstallgruntGrunt入门package.json{"name":"my-project-name","version":"0.1.0","devDependencies":{grunt":" 查看详情

用grunt进行css文件压缩

...CSS文件全部放在项目目录下名为css的文件夹中，现在将它压缩合并成一个名为main-min.css的文件，放在css-min文件夹下。（1）首先保证机器安装了node.js.（2）在项目的目录下建立名为package.json的文件,用于配置需要安装的npm包，packag... 查看详情

使用 grunt 将本地 .js 和 .css 文件自动引用到 index.html

】使用grunt将本地*.js和*.css文件自动引用到index.html【英文标题】：Automaticreferenceoflocal*.jsand*.cssfilesintoindex.htmlwithgrunt【发布时间】：2017-02-1705:24:46【问题描述】：我打算开发一个angularJS客户端，我将在其中使用Angular组件。这将导... 查看详情

grunt入门

...能强大，jshint对JS文件的检测，以及js和css文件的合并，压缩，是前端自动化压缩构建项目的得力助手。接下来就随lizimeme一起学习grunt的基本使用我的电脑安装了nodejs,自动全局安装了npm(npm是随同NodeJS一起安装的包管理... 查看详情

grunt压缩图片

今天我们来说一下用Grunt来压缩图片和JS吧!首先要安装插件:这是压缩图片的;npminstall--save-devgulp-imagemin　这是压缩JS的:npminstall--save-devgulp-imagemin　　然后引入依赖: vargulp=require("gulp");在引入插件:varimagemin=require(‘gulp-imagemin 查看详情

关于requirejs和grunt压缩合并是否矛盾

...。但是分成多个js文件增加了请求数，那么就要用到合并压缩。合并压缩了原来的许多独立的js模块，那requirejs又是怎么冲压缩的文件中找到各个独立的模块进行加载的呢，感觉两者有点冲突，这个问题想了很久也假想了很多可... 查看详情

grunt管理js/css

1.安装node2.npm安装3.运行grunt,可能遇到下面的问题可以运行npminstall-ggrunt然后再运行grunt可以看到已经压缩成功了: 查看详情

grunt两小时入门

...6.后续学习 1.用途和场景jshint代码检查代码合并代码压缩--js/css/ht 查看详情

如何用grunt压缩文件

grunt-cli全局装完之后，就可以给每个项目装grunt了。 1.先把package.json和Gruntfile.js拷到项目下（PS：这两个文件是每个项目转grunt的时候必带的）2.cmd进入到项目目录下然后执行“npminstallgrunt--save-dev”（PS：这一步是用... 查看详情

grunt常用插件的使用

...主要使用到的是其中对css的less预处理器的转换，图片的压缩，js,css文件的合并压缩以及实时监测的插件。好处是：节省带宽流量，提高了代码的安全性。使用Grunt的步骤如下：1.安装：先要安装Node.js,然后安装Grunt(... 查看详情

grunt：将html页面捆绑到单个html文件中。所有依赖项(代码片段)

...我想（自动）将所有脚本/css捆绑到一个HTML文件中。使用Grunt实现构建过程（测试，代码格式化，JSDoc生成）。期望的解决方案：我需要一个Grunt插件（或可以与Grunt集成查看详情

grunt入门学习

...间回忆一下作为一个前端需要做的工作(Loading...)JS合并JS压缩CSS压缩CSSSprite图片优化测试静态资源缓存(版本更新)...对应的，一个全副武装的前端可能会是这样的：JSHintCSSLintJade 查看详情

关于grunt和gulp

...自动化工具，一个基于nodeJs的命令行工具，一般用于：①压缩文件②合并文件③简单语法检查”自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的... 查看详情

如何使用grunt压缩js文件

jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！1.前言各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复... 查看详情

正文