gulp 학습 (3) - 실전

레 퍼 런 스

i5tingbook

gulp-book

앞의 두 절 에서 gulp 의 기본 지식 을 배 웠 고 gulp 가 압축, 모니터링, combo 등 을 할 수 있다 는 것 을 알 고 실전 을 진행 했다.gulp 에는 많은 플러그 인 이 있 기 때문에 우 리 는 바퀴 를 반복 할 필요 가 없습니다. 관련 플러그 인 만 잘 사용 하면 됩 니 다.
웹 서버
때때로 우 리 는 로 컬 에 아파 치 나 Nginx 를 정적 서버 로 설치 하고 gulp 가 있 으 면 사용 하지 않 습 니 다.gulp-connect 플러그 인 은 웹 서버 기능 을 실현 할 수 있 습 니 다.
gulp - connect 설치:

    npm install --save-dev gulp-connect

예시:

    'use strict';
    const gulp = require('gulp');
    const connect  = require('gulp-connect');
    gulp.task('server',function(){
        connect.server();
    });
    gulp.task('default',['server']);

명령 gulp 을 실행 한 후 터미널 에서 로 그 를 다음 과 같이 인쇄 합 니 다.

    [22:07:20] Using gulpfile ~/WebstormProjects/es6-doc/gulpfile.js
    [22:07:20] Starting 'server'...
    [22:07:20] Finished 'server' after 34 ms
    [22:07:20] Starting 'default'...
    [22:07:20] Finished 'default' after 7.53 μs
    [22:07:20] Server started http://localhost:8080

웹 서버 가 시작 되 었 음 을 알 수 있 습 니 다.http://localhost:8080 방문 이 가능 하 다.기본 값 은 접근 gulpfile.js 이 있 는 디 렉 터 리 index.html 입 니 다.
시간 절약 브 라 우 저 동기 화 테스트 도구 browsersync
홈 페이지 에서 발췌 하 다
rowsersync 는 브 라 우 저 로 하여 금 실시 간 으로 파일 변경 (html, js, css, sas, less 등) 에 신속하게 응답 하고 페이지 를 자동 으로 새로 고 칠 수 있 습 니 다.더 중요 한 것 은 Browsersync 가 PC, 태 블 릿, 휴대 전화 등 장치 에서 동시에 디 버 깅 을 할 수 있다 는 것 이다."책상 위 에 pc, 아이 패드, 아이 폰, 안 드 로 이 드 등 장치 가 있다 고 가정 하고 디 버 깅 할 페이지 를 열 었 습 니 다. browser sync 를 사용 하면 코드 가 저장 되 고 이상 의 장 치 는 변경 사항 을 동시에 표시 합 니 다" 라 고 상상 할 수 있 습 니 다.전단 이 든 백 엔 드 엔지니어 든 사용 하면 업무 효율 을 30% 높 일 수 있 습 니 다.
gulp 압축 js css
gulp - uglify 설치:

    npm install --save-dev gulp-uglify

예시:

    gulp.watch('js/*.js',['uglify_js']);
    gulp.task('uglify_js',function(){
        gulp.src('js/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('build/js'));
    });
    gulp.task('default',['uglify_js']);

위의 이 코드 는 js 문서 아래 의 js 파일 내용 이 변 할 때 다시 압축 되 어 목적 디 렉 터 리 로 출력 됩 니 다.
gulp 컴 파일 less
설치:

npm install --save-dev gulp-less

예시:

    const gulp = require('gulp');
    const less = require('gulp-less');
    //   less
    //        gulp less      
    gulp.task('less', function () {
        // 1.    less   
        gulp.src('less/**.less')
            // 2.    css
            .pipe(less())
            // 3.     
            .pipe(gulp.dest('dist/css'))
    });

    //        gulp auto      
    gulp.task('auto', function () {
        //       ，          less   
        gulp.watch('less/**.less', ['less'])
    })

    //    gulp.task('default')       
    //        gulp    less     auto   
    gulp.task('default', ['less', 'auto'])

위의 코드 는 less 파일 변 화 를 실현 하여 css 폴 더 로 컴 파일 하여 출력 할 수 있 습 니 다.
또한 gulp 로 sass 와 압축 그림, combo 파일 등 을 컴 파일 할 수 있 습 니 다.직접 확인 하 셔 도 됩 니 다.
gulp 를 이용 하여 프로젝트 구축