전단 퀘스트 구축 이익 Gulp를 상세히 설명합니다.js 사용 설명서

개요

소프트웨어 개발에서 임무 실행기의 장점은 말하지 않아도 안다.그것들은 흔히 볼 수 있는 지루한 작업을 자동으로 실행하는 데 도움을 줄 수 있으며, 예를 들어 좋은 코드를 두드리는 것과 같은 더 중요한 일에 집중할 수 있다.엄숙하게 말하자면 이미지 압축, 코드 압축, 단원 테스트와 더 많은 임무를 자동으로 실행하는 기술은 그야말로 시간을 절약하는 유리한 도구이다.
많은 전단 개발자들에게 현재 가장 많이 사용되는 작업 관리자는 바로 Grunt입니다. Gruntfile에서 사용할 수 있는 것입니다.js 파일에서 JavaScript를 사용하여 다양한 작업을 실행하는 도구를 정의합니다.기본적으로 자바스크립트를 이해하기만 하면 Grunt 작업을 만드는 것은 매우 간단하고 직접적인 일이다.풍부한 제3자 플러그인, 예를 들어 jsHint,Sass, Uglify 등은 Grunt를 가장 확장하기 쉬운 도구 중의 하나로 만들었다.
대부분의 사람들에게 작업 실행기로 Grunt를 선택해 왔다.그러나 최근에는 설치가 쉽고 읽기 쉽고 관리가 간편한 매우 간단한 프로필을 가지고 있다.js의 도구는 많은 사람들의 눈길을 끌었다.

Gulp를 설치합니다.js

Gulp.js는 Grunt와 마찬가지로 Node 기반 작업 실행 도구입니다.그래서 Node를 설치해서 실행해야 합니다.Gulp를 설치할 수 있는 몇 가지 다른 방법은 당신의 운영체제에 달려 있습니다.OS X에서 나는 nvm를 사용한다. 이것은 TimCaswell이 여러 개의 Node를 관리하는 데 쓴 것이다.js 버전의 괜찮은 스크립트 도구입니다.너도 노드에서 직접 갈 수 있어.js 공식 사이트에서 바이너리 파일을 다운로드합니다.만약 당신이 Node에 대해 아직 아무것도 모른다면, 나는 당신이 Nettuts + series에 가서 먼저 Node를 익히는 것이 좋겠다고 건의합니다.js.
우리는 npm(Node 패키지 관리자)로 Gulp를 신속하게 설치할 수 있습니다.터미널을 열고 다음을 입력합니다.
npm install -g gulp
이 명령은 npm의 등록 메커니즘에서gulp를 가져와 명령줄에 직접 접근할 수 있도록 시스템에 전역적으로 설치합니다.
gulp를 설치했습니다. 다음은 프로젝트에서 사용하기 시작합니다.

Gulp를 사용합니다.js 프로젝트 만들기

프로젝트에서 Gulp를 사용하려면 다음 주요 사항을 완료해야 합니다.

두 개의 의존 패키지를 설치합니다

당신이 사용하고 싶은 플러그인을 설치하십시오

Gulp를 생성합니다.js 파일을 만들고 실행할 작업을 정의합니다

Gulp에서 프로필을 사용할 수 있도록 항목의 경로에서 위의 몇 가지를 완료하십시오.
먼저 종속 패키지를 설치합니다.
npm install --save-dev gulp gulp-util
지정한 작업을 실행하기 위해 프로필에 정의된 Gulp 플러그인을 설치해야 합니다.이 플러그인들은 모두 Node 패키지이기 때문에 우리는 다시 npm를 사용하여 설치합니다.
npm install --save-dev gulp-uglify gulp-concat
Uglify를 사용할 수 있도록 플러그인 두 개를 설치합니다.js 압축기는 JavaScript 코드를 간소화/압축하고 여러 JS 파일을 한 파일에 통합합니다.
주의, 내가 여기에 사용하는 save-dev, 이 명령은 현재 프로젝트에만 Gulp 의존 패키지와 플러그인을 설치하도록 합니다.이렇게 하면 패키지에 있어요.json의 devDependencies 목록에서 모든 의존항에 대응하는 단어 표식을 생성합니다.아래와 같이

{
  "devDependencies": {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

이렇게 하면 npm를 사용하여 프로젝트에 의존 패키지와 플러그인을 설치할 수 있습니다.프로젝트에 패키지가 없으면.json 파일, 명령줄에 npm init를 입력하거나 편집기에서 수동으로 만들고 해당하는 괄호를 쓴 다음'package'라고 저장합니다.json”.명령줄에 npm 명령을 입력하여 업데이트합니다.괄호를 사용해야 합니다. 그렇지 않으면 save-dev를 사용하려고 할 때 npm에서 합법적인 JSON 파일이 아니라는 오류가 발생합니다.
이 안내서에서 저는 두 개의 플러그인만 사용했지만 Gulp는 200개가 넘는 플러그인을 제공하여 서로 다른 기능 수요를 만족시켰습니다.

LiveReload(gulp-livereload)

JSHint(gulp-jshint)

Sass(gulp-sass)

CoffeeScript file compilation(gulp-coffee)

아직 많이 남았어요..

Gulpfile.js 파일

Grunt와 마찬가지로 Gulp에는 Gulpfile이라는 것이 있습니다.js의 동명 프로필은 작업을 실행하는 데 필요한 모든 플러그인을 정의합니다.프로젝트의 루트 디렉터리에 이 파일을 만들어야 합니다.
간단하고 직설적인 문법으로 gulp 파일을 쉽게 읽을 수 있습니다.

var gulp    = require('gulp'),
gutil    = require('gulp-util'),
uglify  = require('gulp-uglify'),
concat  = require('gulp-concat');

위 코드는 gulp가 이미 정한 작업을 수행하기 위해 어떤 플러그인을 인용해야 하는지 간단하게 알려 줍니다.
다음 단계에서는 Gulp가 실행되는 작업을 정의해야 합니다.나는 여기에서 두 가지를 정의한다.

압축 사진

JS 파일 간소화

Gulp 메서드 task () 를 사용하여 실행할 작업을 정의합니다.

gulp.task('js', function () {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

위의 코드를 보세요. 인용된 플러그인으로 구성된 혼합 방법으로 호출됩니다.첫 번째 방법task(), 하나의 이름을 사용하여 현재 임무를 대표하고, 또 하나의 익명 방법은 실제 조작을 포함한다.코드를 분해해 보겠습니다.

gulp.src('./js/*.js')

src () 방법은 압축해야 할 JS 파일을 어디서 찾을 것인지를 지정하고 문서 구조를 포함하는 데이터 흐름으로 변환하여 다음에 실행될 플러그인에 전달합니다.이것은 노드입니다.jsStreams API의 일부분도 바로 Gulp가 간단명료한 API 문법을 가진 이유 중의 하나이다.

.pipe(uglify())

pipe () 방법은 src () 방법에서 전송된 데이터 흐름을 얻어 지정한 플러그인에 전송합니다.현재 예에서, 플러그인 uglify는 데이터 흐름을 수신합니다.

.pipe(concat('all.js'))

uglify와 같이 플러그인concat은 pipe () 를 통해 전송된 데이터 흐름을 수신한 다음 여러 JS 파일을'all'로 통합합니다.js'에서

.pipe(gulp.dest('./js'));

마지막으로 Gulp의 dest() 방법을 사용하여 all.js를 지정한 디렉터리에 쓰면 전체 과정의 프로필을 쉽게 읽을 수 있습니다.
그리고 마지막으로 우리가 해야 할 일은 Gulp의 기본 실행 작업을'js'로 바꾸는 것이다.

gulp.task('default', function(){
    gulp.run('js'); 
});

명령줄로 돌아가서'gulp'를 입력하면 Gulp에서 gulpfile을 찾을 수 있습니다.js 파일, 모든 의존 항목과 플러그인을 불러오고 기본 작업'js'를 실행합니다.너는 마지막 운행 결과에서 파일이 압축되어 합쳐질 수 있다
우리 한 걸음 더 가까이 갑시다.Gulp는 지정한 자원 변경을 감시할 수 있는 또 다른 방법인 watch () 를 제공합니다.'gulp'실행 작업을 수동으로 입력하는 것과 달리, 이 방법은 자원의 변화에 따라 자동으로 작업을 실행할 수 있습니다.

gulp.watch('./js/*', function () {
     gulp.run('js');
});

위의 코드가 실행될 때, Gulp는 지정한 자원에 대한 감시를 계속 유지하고, 자원이 변경되면'js'방법을 다시 실행합니다.이 기능 좋아요!

Gulp.js 전환

내가 Gulp를 처음 들었을 때, 나의 첫 반응은 "또 하나의 훌륭한 도구!"였다.Gulp.js는 확실히 매력적인 문법과 API를 가지고 있으며 구축 작업을 쉽게 할 수 있습니다.비록 플러그인은Grunt가 풍부하지 않지만, 플러그인 라이브러리는 나날이 증가하고 있으며, 특히 현재 그것에 대해 흥미를 가지고 있는 이렇게 많은 개발자들을 가지고 있는 것처럼 보인다.
이상은 전단 퀘스트 구축 이기Gulp를 상세히 설명합니다.js 사용 안내서의 상세한 내용, Gulp에 대한 자세한 내용.js 사용 안내서의 자료는 저희 기타 관련 문장에 주목하세요!