gulp Samouczek
Pierwsze kroki z łykiem

Uwagi

Wersje

Instalacja lub konfiguracja

1. Zainstaluj Node.js i NPM:

Gulp wymaga Node.js i NPM, menedżera pakietów Node. Większość instalatorów zawiera NPM z Node.js. Zapoznaj się z dokumentacją instalacyjną lub potwierdź, że jest już zainstalowana, uruchamiając w terminalu następujące polecenie:

npm -v
// will return NPM version or error saying command not found

2. Zainstaluj gulp globalnie:

Jeśli wcześniej zainstalowałeś wersję gulp globalnie, uruchom npm rm --global gulp aby upewnić się, że twoja stara wersja nie koliduje z gulp-cli .

$ npm install --global gulp-cli

3. Zainicjuj katalog projektu:

$ npm init

4. Zainstaluj gulp w swoim projekcie devDependencies:

$ npm install --save-dev gulp

5. Utwórz gulpfile.js w katalogu głównym projektu:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Uruchom łyk:

$ gulp

Zadanie domyślne zostanie uruchomione i nic nie zrobi.

Aby uruchomić pojedyncze zadania, użyj polecenia gulp <task> <othertask> .

Zależność od zadania

Możesz uruchamiać zadania szeregowo, przekazując drugi parametr do gulp.task() .

Te parametry to tablica zadań do wykonania i wykonania przed uruchomieniem zadania:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

Możesz także pominąć tę funkcję, jeśli chcesz uruchomić pakiet zadań zależności:

gulp.task('build', ['array', 'of', 'task', 'names']);

Uwaga: zadania będą uruchamiane równolegle (wszystkie jednocześnie), więc nie zakładaj, że zadania zaczną się / kończą w kolejności. Począwszy od gulp v4 , należy użyć gulp.series() jeśli ważna jest kolejność wykonywania zadań zależności.

Concat plik js w podfolderze za pomocą gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

przełknąć dokumenty CLI

Flagi

gulp ma bardzo niewiele flag do poznania. Wszystkie pozostałe flagi służą do użycia zadań w razie potrzeby.

• -v lub --version wyświetli globalne i lokalne wersje gulp
• --require <module path> będzie wymagała modułu przed uruchomieniem pliku gulp. Jest to przydatne dla transpilatorów, ale ma także inne zastosowania. Możesz użyć wielu flag --require
• --gulpfile <gulpfile path> ręcznie ustawi ścieżkę pliku gulp. Przydatne, jeśli masz wiele plików gulp. Spowoduje to również ustawienie CWD na katalog gulpfile
• --cwd <dir path> ręcznie ustawi CWD. Wyszukiwanie pliku gulp, a także względność wszystkich wymagań będzie stąd
• -T lub --tasks wyświetlą drzewo zależności zadań dla załadowanego pliku gulp
• --tasks-simple wyświetli listę tekstową zadań dla załadowanego pliku gulp
• --color zmusi wtyczki gulp i gulp do wyświetlania kolorów, nawet jeśli nie zostanie wykryta obsługa kolorów
• --no-color zmusi wtyczki gulp i gulp, aby nie wyświetlały kolorów nawet po wykryciu obsługi kolorów
• --silent wyłączy wszystkie rejestrowanie --silent

Interfejs CLI dodaje proces.env.INIT_CWD, który jest oryginalnym programem cwd, z którego został uruchomiony.

Flagi specyficzne dla zadania

Odwołaj się do tego łącza StackOverflow, aby dowiedzieć się, jak dodać flagi specyficzne dla zadania

Zadania

Zadania można wykonać, uruchamiając gulp <task> <othertask> . Wystarczy uruchomić gulp aby wykonać zarejestrowane zadanie o nazwie default . Jeśli nie ma default zadania, łyk popełni błąd.

Kompilatory

Możesz znaleźć listę obsługiwanych języków w interpretacji . Jeśli chcesz dodać obsługę nowego języka, wyślij tam żądanie ściągnięcia / otwórz problemy.