gulp 튜토리얼
꿀꺽 마는 시작하기

비고

버전

설치 또는 설정

1. Node.js 및 NPM을 설치하십시오.

Gulp에는 Node.js 및 NPM, 노드의 패키지 관리자가 필요합니다. 대부분의 설치 프로그램에는 Node.js가있는 NPM이 포함되어 있습니다. 설치 설명서를 참조 하거나 터미널에 다음 명령을 실행하여 이미 설치되어 있는지 확인하십시오.

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

2. 전역에 꿀꺽 마술을 설치하십시오.

이전에 gulp 버전을 전 세계적으로 설치 한 경우 npm rm --global gulp 를 실행하여 이전 버전이 gulp-cli 와 충돌하지 않는지 확인하십시오.

$ npm install --global gulp-cli

3. 프로젝트 디렉토리를 초기화하십시오.

$ npm init

4. 프로젝트 devDependencies에 꿀꺽 꿀꺽 마시기를 설치하십시오 :

$ npm install --save-dev gulp

5. 프로젝트 루트에 gulpfile.js를 만듭니다.

var gulp = require('gulp');

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

6. 꿀꺽 거리기를 실행하십시오.

$ gulp

기본 작업이 실행되고 아무 것도 수행하지 않습니다.

개별 작업을 실행하려면 gulp <task> <othertask> .

작업 종속성

gulp.task() 두 번째 매개 변수를 전달하여 일련의 작업을 실행할 수 있습니다.

이 매개 변수는 작업을 실행하기 전에 실행 및 완료 할 작업의 배열입니다.

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
});

종속성 작업 번들 만 실행하려는 경우에도 함수를 생략 할 수 있습니다.

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

참고 : 작업은 동시에 실행되므로 모든 작업을 순서대로 시작 / 완료한다고 가정하지 마십시오. gulp.series() v4를 시작 하기 위해 gulp.series() 는 종속성 작업의 실행 순서가 중요한 경우 사용해야합니다.

gulp를 사용하여 하위 폴더에있는 Concat js 파일

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'));
});

CLI 문서

국기

꿀꺽 꿀꺽 마심에 대해 아는 국기가 거의 없습니다. 다른 모든 플래그는 필요한 경우 태스크가 사용됩니다.

• -v 또는 --version 은 글로벌 및 로컬 꿀벌 버전을 표시합니다.
• --require <module path> 는 gulpfile을 실행하기 전에 모듈을 요구합니다. 이것은 transpilers에 유용하지만 다른 응용 프로그램도 있습니다. 여러 개의 --require 플래그를 사용할 수 있습니다.
• --gulpfile <gulpfile path> 는 --gulpfile <gulpfile path> 를 수동으로 설정합니다. 여러 개의 꿀풀 파일이있는 경우 유용합니다. 이렇게하면 CWD가 gulpfile 디렉토리로 설정됩니다.
• --cwd <dir path> 는 수동으로 CWD를 설정합니다. gulpfile에 대한 검색뿐만 아니라 모든 상대성의 상대성도 여기에서있을 것입니다.
• -T 또는 --tasks 는로드 된 gulpfile에 대한 작업 종속성 트리를 표시합니다.
• --tasks-simple 은로드 된 gulpfile에 대한 작업의 일반 텍스트 목록을 표시합니다.
• --color 는 색상 지원이 감지되지 않더라도 꿀꺽 꿀꺽 소리와 꿀꺽 마심 플러그인이 색상을 표시하도록합니다.
• --no-color 는 색상 지원이 감지 되더라도 gulp 및 gulp 플러그인이 색상을 표시하지 않도록합니다.
• --silent 는 모든 gulp 로깅을 비활성화합니다.

CLI는 시작된 원래의 cwd 인 process.env.INIT_CWD를 추가합니다.

작업 특정 플래그

태스크 별 플래그를 추가하는 방법은이 StackOverflow 링크를 참조하십시오.

할 일 목록

gulp <task> <othertask> 실행하여 작업을 실행할 수 있습니다. gulp 것은 당신이 등록한 default 작업을 실행합니다. default 작업이 없다면 꿀꺽 꿀꺽 마실 것입니다.

컴파일러

해석시 지원되는 언어 목록을 찾을 수 있습니다. 새로운 언어에 대한 지원을 추가하고 싶다면 pull request / open issues를 보내주십시오.