Utiliser GruntJS pour créer des programmes Web et fusionner et compresser them

Utiliser GruntJS pour créer des programmes Web et fusionner et compresser them_node.js

WBOY

Libérer： 2016-05-16 16:45:48

original

1541 Les gens l'ont consulté

Les étapes sont les suivantes :

1. Créez un nouveau projet Bejs
2. Créez un nouveau fichier package.json
3. Créez un nouveau fichier Gruntfile.js
4. Exécutez la tâche Grunt à partir de la ligne de commande
.

1. Créez un nouveau projet Bejs
Le code source est placé sous src Ce répertoire a deux sous-répertoires, Asset et js. js décentralise selector.js et ajax.js Dans l'article précédent, nous avons déjà expliqué comment les fusionner et les compresser. Cet article se concentre uniquement sur le répertoire des ressources, qui contient des images et des fichiers CSS. Après un certain temps, les deux ressources CSS reset.css et style.css seront fusionnées et compressées dans le répertoire dest/asset. Une version fusionnée all.css et une version compressée all-min.css.

2. Créez un nouveau package.json
Placez package.json dans le répertoire racine. Sa signification a été présentée dans l'article précédent. La structure actuelle du projet est la suivante

Le contenu de package.json doit être conforme aux spécifications de syntaxe JSON, comme suit

Copier le code Le code est le suivant :

{
 "nom": " BeJS", 
 "version": "0.1.0",
 "devDependencies": {
 "grunt": "~0.4.0",
 "grunt-contrib-concat": " ~0.1.1",
 "grunt-css": ">0.0.0"
 }
>

grunt-contrib-concat a été introduit dans le précédent article, grunt -css est le plugin à utiliser dans cet article.

À ce stade, ouvrez l'outil de ligne de commande et entrez dans le répertoire racine du projet, puis tapez la commande suivante : npm install

En regardant le répertoire racine, nous avons constaté qu'il existe un répertoire node_modules supplémentaire, comprenant quatre sous-répertoires, comme indiqué dans l'image

3. Créez un nouveau fichier Gruntfile.js
Gruntfile.js est également placé dans le répertoire racine du projet. Presque toutes les tâches sont définies dans ce fichier. Il s'agit d'un fichier js ordinaire, et n'importe quel code js peut être écrit. dedans. Non limité à JSON. Comme package.json, il doit être soumis à svn ou git comme le code source.

Le code source est le suivant

Copiez le codeLe code est le suivant :

module.exports = function(grunt ) {
 // Configuration
 grunt.initConfig({
 pkg : grunt.file.readJSON('package.json'),
 concat : {
 css : {
 src : ['src/asset/*.css'],
 dest : 'dest/asset/all.css'
 }
 },
 cssmin : { 
 css : {
 src : 'dest/asset/all.css',
 dest : 'dest/asset/all-min.css'
 }
 });
 // Chargement des plug-ins concat et css, respectivement pour la fusion et la compression
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-css');
 // Tâche par défaut
 grunt.registerTask('default', ['concat', 'cssmin']);
} 

4. Exécutez la tâche grunt

Ouvrez la ligne de commande, entrez dans le répertoire racine du projet et tapez grunt

Il ressort des informations imprimées que le répertoire dest et les fichiers attendus ont été fusionnés et compressés avec succès et que le répertoire dest et les fichiers attendus ont été générés. À ce stade, il y a dest dans le répertoire du projet, comme suit <.>

À ce stade, la fusion et la compression CSS sont terminées.