Il y a probablement les étapes suivantes
Nouveau projet Bejs
Créer un nouveau package de fichiers.json
Créer un nouveau fichier gruntfile.js
Exécuter des tâches de grognement sur la ligne de commande
1. Nouveau projet Bejs
Le code source est placé sous SRC et le répertoire a deux fichiers JS, Selector.js et ajax.js. Après compilation, le code est placé dans Dest et ce grognement sera généré automatiquement.
2. Créez un nouveau package.json
package.json est placé dans le répertoire racine et contient des méta-informations du projet, telles que le nom du projet, la description, le numéro de version, le package de dépendance, etc. Il doit être soumis à SVN ou GIT comme le code source. 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-jshint": "~ 0.1.1",
"grunt-contrib-uglify": "~ 0.1.2",
"Grunt-Contrib-Concat": "~ 0.1.1"
}
}
Grunt in DevDependces a été installé dans l'article précédent, tandis que Grunt-Contrib-Jshint / Grunt-Contrib-Uglify / Grunt-Contrib-Concat n'est pas installé. Trois pour trois tâches
chèque de syntaxe grogn-contrib-js
compression grogn-contrib-uglify, en utilisant uglifyjs
grunt-contrib-contrat Fermer les fichiers
À l'heure
Vérifiez à nouveau 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.
Gruntfile.js se compose du contenu suivant
La fonction de wrapper a la structure suivante. Ceci est une façon typique d'écrire Node.js. Utilisez des exportations pour exposer l'API
La copie de code est la suivante:
module.exports = fonction (grunt) {
// fait des choses liées au grognement ici
};
Configuration du projet et de la tâche
Chargez des plugins et des tâches grognées
Personnaliser l'exécution des tâches
Cet exemple termine les tâches suivantes
Fusionnez les fichiers sous SRC (ajax.js / selector.js) à domop.js
Compress domop.js à domop.min.js
Les deux fichiers sont placés dans le répertoire dest
Le dernier gruntfile.js est le suivant
La copie de code est la suivante:
module.exports = fonction (grunt) {
// Configuration
grunt.initconfig ({
pkg: grunt.file.readjson ('package.json'),
concat: {
Domop: {
src: ['src / ajax.js', 'src / sélecteur.js'],
dest: 'dest / domop.js'
}
},
uglify: {
Options: {
Bannière: '/ *! <% = pkg.name%> <% = grunt.template.today ("yyyy-mm-dd")%> * // n '
},
construire : {
src: 'dest / domop.js',
dest: 'dest / domop.min.js'
}
}
});
// Chargez les plugins Concat et Uglify, pour la fusion et la compression respectivement
grunt.loadnpmtasks («grunt-contrib-concat»);
grunt.loadnpmtasks («grunt-contrib-uglify»);
// Enregistrer une tâche
grunt.registerTask ('Default', ['Concat', 'uglify']);
};
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
Ok, voici deux tâches courantes, Concat et Uglify, Jshint, etc., qui ne sont pas introduites. Le code dans gruntfile.js n'est pas interprété un par un. Les étudiants intéressés peuvent le trouver dans le document officiel de GruntJS.