NPM Installer Gulp - Save-DEV
Qu'est-ce que Gulp?
Gulp est une nouvelle génération d'outils de construction de projets frontaux. Vous pouvez utiliser Gulp et ses plugins pour compiler votre code de projet (moins, SASS), et peut également compresser votre code JS et CSS, et même compresser vos images. Gulp n'a qu'une petite quantité d'API, il est donc très facile à apprendre. Gulp utilise Stream pour traiter le contenu. Le nœud a engendré un certain nombre d'outils d'automatisation, tels que Bower, Yeoman, Grunt, etc.
Similitudes et différences entre la gulp et le grognement
Facile à utiliser: en utilisant le code sur les stratégies de configuration, Gulp garde des choses simples et complexes Tâches gérables.
Efficace: En tirant parti du puissant flux de Node.js, vous pouvez compléter la construction plus rapidement sans écrire des fichiers intermédiaires sur le disque.
Haute qualité: les directives de plugins strictes de Gulp pour s'assurer que les plugins sont simples et fonctionnent comme vous vous y attendez.
Facile à apprendre: en minimisant les API, vous pouvez apprendre Gulp en très peu de temps. Le travail de construction est comme vous l'imaginiez: c'est une série de pipelines de flux.
Parce que Gulp est écrit dans Node.js, vous devez installer NPM sur votre terminal. NPM est le gestionnaire de package Node.js, alors installez d'abord Node.js sur votre machine.
Commande d'installation Gulp
Sudo NPM Install -g Gulp
Créez un nouveau fichier package.json dans le répertoire racine
npm init.
Installer le package Gulp
Après l'installation, entrez à nouveau Gulp -V pour afficher le numéro de version, comme le montre la figure suivante, elle est réussie:
Installer des plug-ins
Installez les plugins couramment utilisés:
Compilation de SASS (Gulp-Ruby-Sass)
Ajouter automatiquement le préfixe CSS (Gulp-Autoprefixer)
CSS comprimé (Gulp-minify-CSS)
Vérification du code JS (Gulp-Jshint)
Fusion des fichiers JS (Gulp-Concat)
Code JS compressé (Gulp-Uglify)
Image comprimée (gulp-imagemin)
Rafraîchir automatiquement la page (Gulp-livereload)
Cache d'image, seulement si l'image est remplacée (gulp-cache)
Changer de rappel (Gulp-Notify)
Effacer le fichier (del)
Pour installer ces plugins, vous devez exécuter la commande suivante:
La copie de code est la suivante:
$ npm installer gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-iMagemin gulp-notify gulp-remed gulp-liveload gulp-cache del --save-Dev
-Save et -Save-Dev peuvent vous sauver les étapes pour modifier manuellement le fichier package.json.
NPM Installer Module-Name -Save
Ajoutez automatiquement les numéros de module et de version à la section des dépendances
NPM Installer Module-Name -Save-Dev
Ajoutez automatiquement les numéros de module et de version à la section DevDependcesnces
commande de gorgée
Vous avez seulement besoin de connaître 5 commandes de gulp
gulp.task (nom [, DEPS], FN) Définir le nom de la tâche: Nom de la tâche Deps: dépendance Nom de la tâche FN: Fonction de rappel
gulp.run (tâches ...): exécutez plusieurs tâches en parallèle que possible autant que possible
Gulp.Watch (Glob, FN): Lorsque le contenu Glob change, exécutez FN
gulp.src (glob): définissez le chemin d'accès au fichier à traiter, qui peut être plusieurs fichiers sous la forme d'un tableau, ou il peut être régulier
gulp.dest (chemin [, options]): définissez le chemin pour générer le fichier
glob: peut être un chemin de fichier direct. Sa signification est la correspondance des modèles.
Les fichiers à traiter par Gulp guides les plugins liés via l'API Pipeline (PIPE ()). Exécutez des tâches de traitement de fichiers via des plug-ins.
gulp.task ('default', function () {...});L'API Gulp.Task est utilisée pour créer des tâches. Vous pouvez entrer $ gulp [par défaut] sur la ligne de commande (facultatif pour les supports) pour effectuer les tâches ci-dessus.
Documentation officielle de l'API Gulp: https://github.com/gulpjs/gulp/blob/master/docs/api.md
Collection du plug-in Gulp: http://gulpjs.com/plugins/
Commencer à construire le projet
Créez un nouveau fichier gulpfile.js dans le répertoire racine du projet et collez le code suivant:
// introduire les plugins gulp et uglify dans le répertoire root du projet var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); gulp.task ('compress', function () {return gulp.src ('script / *. Js') .pipe);Remarque: Le nom du fichier gulpfile.js ne peut pas être modifié.
Le projet doit utiliser les plug-ins UGLIFY et renommer, et exécuter la commande suivante pour installer:
Installation du NPM - Save-Dev Gulp-uglifynpm Installer --Save-Dev Gulp-Rename
Prenez mon exemple, entrez dans le répertoire où se trouve Gulpfile.js:
CD / utilisateurs / Trigkit4 / gulp-test
Entrez ensuite:
var gulp = required ('gulp'); var uglify = require ('gulp-uglify'); var rename = required ('gulp-rame'); gulp.task ('compress', function () {return gulp.src ('script / *. js') .pipe (uglify ')) .py .Pipe (gulp.dest ('dist'));});Cette commande installera toutes les dépendances sous package.json, comme indiqué dans la figure suivante:
Complet gulpfile.js
// Chargez le plug-in var gulp = require ('gulp'), sass = require ('gulp-ruby-sass'), autoprefixer = require ('gulp-autoprefixer'), minifycss = require ('gulp-minify-css'), jshint = required ')') require ('gulp-iMagemin'), rename = require ('gulp-ramen'), clean = require ('gulp-cllean'), concat = require ('gulp-concat'), notify = require ('gulp-notify'), cache = required ('gulp-cache'), liveleload = require (gulp-liveload '); // Style gulp.task ('styles', function () {return gulp.src ('src / styles / main.scss') .pipe (sass ({style: 'expansé',})) .pipe (autoprefixer ('' dernière version '', 'safari 5', ', ie 8', 'ie 9', '' '' ' 4 ')) .Pipe (gulp.dest (' Dist / Styles ')) .Pipe (Rename ({suffixe:' .min '})) .pipe (minifycss ()) .pipe (gulp.dest (' dist / styles ')) .pipe (notify ({message:' Styles tâche complète '}));})); // script gulp.task ('scripts', function () {return gulp.src ('src / scripts / ** / *. Js') .pipe (jshint ('. Js')) .pipe (jshint ('. Js')) .pipe (jshintrc ') .pipe (jshintrc')) .pipe (jshinTr (').'). .Pipe (concat ('main.js')) .pipe (gulp.dest ('dist / scripts')) .pipe (renom ({suffixe: '.min'})) .pipe (uglify ()) .pipe (gulp.dest ('dist / scripts')) .Pipe (notify ({message: 'tâche scripts complète'}));}); // Image gulp.task ('images', function () {return gulp.src ('src / images / ** / *') .pipe (cache (imagemin ({optimizationlevel: 3, progressive: true, interlaced: true})))) .pipe (gulp.dest ('Dist / images')) .pipe. // Clean gulp.task ('clean', function () {return gulp.src (['dist / styles', 'dist / scripts', 'dist / images'], {read: false}) .pipe (clean ());}); // Tâche préréglage gulp.task ('default', ['Clean'], function () {gulp.start ('styles', 'scripts', 'images');}); // gard gulp.task ('watch', function () {// gard all .scss fichiers gulp.watch ('src / styles / ** / *. Scss', ['styles']); // gard tout .js fichiers gulp.watch ('src / scripts / ** / *. Js', ['scripts']); // gard tout. gulp.watch (src / scripts / ** / *. js ', [scripts']); gulp.watch (['dist / **']). sur ('change', fonction (fichier) {server.changed (file.path);});}); });Remarque: Pipe () est une méthode pour passer des flux de données dans le module de flux. Le premier paramètre est la méthode du plug-in. Le plug-in recevra des fichiers qui coulent de l'amont, le processus puis coulent vers le bas.
gulp.task ('nom de la tâche', function () {return gulp.src ('File Path') .Pipe (...) .Pipe (...) // jusqu'à la dernière étape de la tâche.Pipe (...);});plugin Gulp
Gulp-GH-pages: Utilisez Gulp pour générer des documents HTML par Markdown et téléchargez-les sur les pages GIT
https://github.com/shinnn/gulp-gh-pages
var gulp = require ('gulp'); var ghpages = require ('gulp-gh-pages'); gulp.task ('deploy', function () {return gulp.src ('./ dist / ** / *') .pipe (ghpages ());});Plugin Gulp-Jade: compiler le jade dans le fichier html
Plugin sans gulp: compiler moins dans le fichier CSS
var moins = requis ('gulp-sans'); var path = require ('path'); gulp.task ('moins', function () {return gulp.src ('./ moins / ** / *. moins') .Pipe (moins ({paths: [path.join (__ dirname, 'moins', 'incluse')]})) .pipe (gulp.dest ('./ public / css'));}); gulp-live-Server Perging: Pought Pightwourd);}); exiger ('gulp'); var gls = require ('gulp-live-server'); gulp.task ('servir', function () {// 1. Servir avec les paramètres par défaut var server = gls.static (); // équivaut à GLS.Static ('public', 3000); server.start (); // 2. Servir à Port personnalisé var Server = GLS.Static ('Dist', 8888); Server.start (); // 3. '.tmp']);Gulp-liveload peut enregistrer et actualiser en temps réel, il n'est donc pas nécessaire d'appuyer sur F5 et de changer l'interface
Gulp-wad-plagins: Chargez automatiquement le plugin arbitraire de Gulp dans votre fichier package.json
$ Install de NPM - Save-dev Gulp-wad-wad-Plugins
Par exemple, un fichier package.json donné est le suivant:
{"dépendances": {"gulp-jshint": "*", "gulp-contrat": "*"}}Ajoutez le code suivant dans gulpfile.js:
var gulp = require ('gulp'); var gulploadplugins = require ('gulp-wad-plagins'); var plugins = gulploadplugins (); plugins.jshint = require ('gulp-jshint'); plugins.concat = require ('gulp-contrat');Gulp-Babel: le plugin Babel de Gulp,
$ NPM Install - Save-Dev Gulp-Babel Babel-Preset-ES2015
Comment utiliser:
const gulp = required ('gulp'); const babel = require ('gulp-babel'); gulp.task ('default', () => {return gulp.src ('src / app.js') .pipe (babel ({presets: ['es2015']})) .pipe (gulp.dest ('dist');});GitHub officiel: https://github.com/gulpjs/gulp