gulp 전단 자동화 도구 의 빠 른 입문 사례

최근 프로젝트 와 작업 중 에 자동화 도 구 를 사용 하기 시 작 했 습 니 다. 예전 에 이것 을 접 했 을 때 어떤 nodejs, grunt 같은 것 이 었 는 지 생각해 보 세 요. 이번 에는 아예 새로운 것 을 사용 하 세 요. 그러면 gulp 입 니 다.
전역 적 으로 npm 를 이용 하여 gulp 설치

sudo npm install -g gulp

프로젝트 에 gulp 패키지 설치

npm install gulp --save-dev

여기 예제 항목 demo 를 만 듭 니 다. 그 안에 index 1. js, index 2. js, index 3. js 세 개의 파일 이 있 습 니 다.
항목 초기 화

npm init .

gulp

gulp 명령 을 실행 하기 전에 루트 디 렉 터 리 에 gulpfile. js 파일 을 새로 만 드 는 것 을 기억 하 십시오. 없 으 면 오류 가 발생 할 수 있 습 니 다. 만 든 후에 계속 실행 하면 ok.
gulpfile. js 파일 편집

var gulp = require('gulp');

//  js  
var uglify = require('gulp-uglify');

//  js  
var concat = require('gulp-concat');

var paths = {
    scripts: ['index1.js', 'index2.js', 'index3.js']
}

gulp.task('default', function() {
    gulp.src(paths.scripts)
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build'));
});

여기에 uglify 와 concat 두 플러그 인 을 설치 하 는 것 을 잊 지 마 세 요. 다음 과 같 습 니 다.

sudo npm install gulp-uglify --save-dev

sudo npm install gulp-concat --save-dev

마지막 으로 gulp 명령 을 수행 하 겠 습 니 다.

[21:41:38] Using gulpfile ~/Desktop/jikexueyuan/gulpfile.js
[21:41:38] Starting 'default'...
[21:41:38] Finished 'default' after 7.65 ms

이러한 출력 을 보면 됩 니 다. build 폴 더 에서 압축 합 친 js 파일 을 볼 수 있 습 니 다.
이 몇 걸음 을 거 쳐 gulp 는 이미 당신 에 게 빼 앗 겼 습 니 다. 더 깊이 하려 면 여 기 를 마구 찌 르 세 요.