Exemples de la façon dont Grunt compresse CSS et HTML

Mes amis ! J'ai évidemment posté un article avant de compresser les images, sur Grunt compressant cCSS et HTML Mais je ne sais pas pourquoi, je l'ai revu aujourd'huiLa confusion a disparu !

.

Je n'ai pas d'autre choix que de l'écrire à nouveau aujourd'hui et de repartir de zéro Tout d'abord, permettez-moi de vous présenter pourquoi nous devons utiliser des outils de build :

En un mot : l'automatisation pour les tâches qui nécessitent une répétition, comme la compression, la compilation, les tests unitaires, le peluchage, etc., les outils d'automatisation peuvent réduire votre travail et simplifier

Votre travail. Lorsque vous avez configuré la tâche dans le Gruntfile, le gestionnaire de tâches vous aidera automatiquement, vous ou votre équipe, à terminer la plupart des travaux ennuyeux

Ci-dessous. Commençons vite :

Les plug-ins Grunt et Grunt sont installés et gérés via npm, qui est le gestionnaire de packages de Node.js. Donc en d'autres termes, si vous souhaitez installer. Grunt, juste Vous devez installer Node. Si vous souhaitez installer Grunt, vous devez installer Node. Si vous souhaitez installer Grunt, vous devez installer Node trois fois ! 🎜>

Vous devez d'abord installer la ligne de commande Grunt (cli) dans l'environnement global. Lors de l'installation, vous devrez peut-être utiliser les privilèges sudo ou exécuter les commandes suivantes en tant qu'administrateur, .

Une fois la commande ci-dessus exécutée, la commande Grunt sera ajoutée à votre chemin système. Vous pourrez exécuter cette commande dans n'importe quel répertoire à l'avenir. .

Notez que l'installation

Cela ne veut pas dire que Grunt est installé ! La tâche de la CLI Grunt est simple : appeler Grunt dans le même répertoire que grunt-cli. L'avantage est que cela vous permet d'installer plusieurs versions de Grunt sur le même système en même temps. Gruntfile

Cela permet d'installer plusieurs versions de Grunt sur la même machine en même temps

De même, les plug-ins Grunt et d'autres modules de nœuds peuvent être installés de la même manière. montré ci-dessous Installez simplement le module de tâches htmlmin :

Ensuite, il y a le module de tâches cssmin :

Une fois que tout est fait : commençons à taper le code :

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']);
}

Ensuite, Win+r affiche la ligne de commande

Entrez grognement et appuyez. Entrez

Voyant ce résultat, vous avez réussi !!

Vous comprenez ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!