Installer Node.js
Tout d'abord, vous devez installer Node.js. De manière générale, vous n'avez qu'à télécharger le package d'installation et l'installer sur le site officiel de Node.js. Mais j'ai échoué honteusement, et l'erreur suivante est apparue:
J'ai donc changé pour brasser Dafa:
infusion d'installation de nodejs
Installer Gulp
Gulp est installé à l'aide de la commande NPM de Node.js:
Installation de NPM - Gulp Global
Puis installez-le dans le répertoire du projet:
Installation de NPM - Save-Dev Gulp
Je suis assez perplexe à propos de cette étape. Avec mes nombreuses années d'expérience en tant que codeur, même si l'installation globale est installée, elle devrait être disponible où l'utiliser. Mais Gulp n'est évidemment pas comme ça. Si vous n'effectuez pas cette étape dans le répertoire du projet, l'erreur suivante sera invitée lors de l'utilisation de la commande Gulp:
… La gorgée locale n'est pas trouvée dans…
… Essayez de courir: NPM Installer Gulp
Enfin, exécutez la commande Gulp dans le répertoire du projet. Si le contenu suivant est sorti, cela signifie que l'installation est complète:
… Aucun gulpfile trouvé
Exemple simple
Ce qui suit montre l'utilisation de Gulp pour créer un serveur de développement de sites Web statique et prend en charge la fonction de rafraîchissement en direct (LiveLeLeLele).
Tout d'abord, vous devez installer le plug-in de navigateur pour LiveleLoad. L'adresse du plug-in est: http://livereload.com/extensions/, qui prend en charge trois navigateurs principaux: Chrome, Firefox et Safari. Une fois le plug-in installé, un bouton apparaîtra sur le navigateur. Ce bouton a deux états. Les points solides indiquent que le plug-in est activé et que les points creux indiquent que le plug-in n'est pas activé. N'oubliez pas de vous souvenir!
Créez ensuite une structure de projet simple:
./gulpfile.js./public/./public/index.html
Utilisez la commande suivante pour installer Gulp et les composants associés:
Installation du NPM - Save-dev Gulp Gulp-Connect
Gulp-Connect est un plug-in Gulp qui fournit des fonctions de serveur Web statique et intègre des fonctions LiveLeLeled.
Ensuite, vous devez modifier le fichier gulpfile.js, le contenu est le suivant:
var gulp = required ('gulp'), connect = required ('gulp-connect') gulp.task ('server', function () {connect.server ({root: 'public', Liveleload: true})}) gulp.task ('html', function () {gulp.src ('./. }) gulp.task ('watch', function () {gulp.watch (['./ public / *. html'], ['html'])}) gulp.task ('default', ['watch', 'server']))Exécutez enfin ce serveur Web:
gorgée
Ouvrez le navigateur et visitez http: // localhost: 4000. Essayez ensuite de modifier le contenu du fichier index.html et enregistrez-le. Dans des circonstances normales, le côté du navigateur doit rafraîchir automatiquement et afficher le contenu modifié.
Comparaison simple entre Gul et Grunt
Regardons un exemple, construisons respectivement Sass dans Gulp et Grunt:
Grognement:
sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } }},autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1 ',' iOS 6 ',' Android 4 ']}, Src:' Dist / Assets / CSS / Main.css ', dest:' Dist / Assets / CSS / Main.css '}}, grunt.registerTask (' Styles ', [' Sass ',' AutoPrefixer ']);Grunt doit configurer les plug-ins séparément et spécifier son chemin source et de destination. Par exemple, nous prenons une archive en entrée pour plug-in sass et stockons les résultats de sortie. Lorsque vous configurez AutoPrefixer, vous devez utiliser la sortie de SASS comme entrée pour générer un nouveau fichier. Jetons un coup d'œil à la même configuration dans Gulp:
Gorgée:
gulp.task ('sass', function () {return gulp.src ('src / styles / main.scss') .pipe (sass ({style: 'compressi'})) .pipe (autoprefixer ('' dernier 2 version ',' safari 5 ',' ie 8 ',' ie 9 ',' opera 12.1 '', 'ioS 6', et «))) .Pipe (gulp.dest ('Dist / Assets / CSS'))});Dans Gulp, nous avons seulement besoin de saisir un fichier. Après le traitement SASS plug-in, il est ensuite transmis à Plug-In AutopRefixer, et enfin un fichier est obtenu. Ce processus accélère le processus de construction, éliminant la lecture et l'écriture de fichiers inutiles et ne nécessite qu'un fichier final.