Il y a les étapes suivantes:
1. Créez un nouveau projet Bejs
2. Créez un nouveau package de fichiers.json
3. Créez un nouveau fichier gruntfile.js
4. Exécuter des tâches grognées sur la ligne de commande
1. Nouveau projet Bejs
Le code source est placé sous SRC et le répertoire a deux sous-répertoires et JS. JS décentralise Selector.js et ajax.js, qui a été discuté dans l'article précédent comment les fusionner et les comprimer. Cet article se concentre uniquement sur le répertoire des actifs, qui contient des images et des fichiers CSS. Dans un certain temps, les deux ressources CSS réinitialisent.css et style.css seront fusionnées et compressées dans le répertoire DEST / Asset. Une version de fusion all.css, une version compressée all-min.css.
2. Créez un nouveau package.json
package.json est placé dans le répertoire racine et sa signification a été introduite dans l'article précédent. La structure du projet actuelle est la suivante
package.json Le contenu doit être conforme aux spécifications de la syntaxe JSON, comme suit
La copie de code est la suivante:
{
"nom": "bejs",
"Version": "0.1.0",
"DevDependces": {
"grognement": "~ 0.4.0",
"grunt-contrib-contrat": "~ 0.1.1",
"Grunt-CSS": "> 0.0.0"
}
}
L'article précédent de grunt-contrib-concat a été introduit. Grunt-CSS est le plugin à utiliser dans cet article.
À l'heure
Vérifiez le répertoire racine et constatez qu'il existe un répertoire Node_Modules supplémentaire, y compris quatre sous-répertoires, voir l'image
3. Créez un nouveau fichier gruntfile.js
GruntFile.js est également placé dans le répertoire des racines du projet. Presque toutes les tâches sont définies dans ce fichier. Il s'agit d'un fichier JS ordinaire, où tout code JS peut être écrit à la place de JSON. Comme package.json, il doit être soumis à SVN ou GIT comme le code source.
Le code source est le suivant
La copie de code est la suivante:
module.exports = fonction (grunt) {
// Configuration
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
css: {
src: ['src / actif / *. css'],
dest: 'dest / acte / all.css'
}
},
cssmin: {
css: {
src: 'dest / acte / all.css',
dest: 'dest / acte / all-min.css'
}
}
});
// Charger les plugins Concat et CSS, pour la fusion et la compression respectivement
grunt.loadnpmtasks («grunt-contrib-concat»);
grunt.loadnpmtasks («grunt-css»);
// tâche par défaut
grunt.registerTask («par défaut», [«concat», «cssmin»]);
};
4. Exécuter les tâches de grognement
Ouvrez la ligne de commande, entrez le répertoire racine du projet et cliquez sur grogner
D'après les informations d'impression, on voit que la fusion et la compression réussies sont générées et que le répertoire dest et les fichiers attendus sont générés. Pour le moment, il y a plus de dest dans le répertoire du projet, comme suit
À ce stade, la fusion et la compression du CSS sont terminées.