glup 기본 동작

전단 공정 화 는 하나의 (도구) 로 전체 전단 절차 와 코드 작성 과 관련 이 없 는 일 을 js 파일 로 만 드 는 것 입 니 다. 실행 할 때 이 도 구 를 자동 으로 이용 하여 필요 한 결 과 를 얻 으 려 면 설정 이 필요 합 니 다.
glup

nodejs 응용 프로그램 입 니 다.

전단 작업 흐름 을 만 드 는 이기 입 니 다. 포장, 압축, 합병, git, 원 격 조작...

간단 하고 사용 하기 쉽다

무 쾌 불 파

고 품질의 플러그 인

....

glup 설치

$ npm install --global gulp-cli

$ npm install --save-dev gulp

각종 플러그 인 설치

    npm install --save gulp            //    gulp
    npm install --save gulp-imagemin   //    
    npm install --save gulp-minify-css //  css
    npm install --save gulp-ruby-sass  //sass
    npm install --save gulp-jshint     //js    
    npm install --save gulp-uglify     //js  
    npm install --save gulp-concat     //    
    npm install --save gulp-rename     //     
    npm install --save png-sprite      //png  
    npm install --save gulp-htmlmin    //  html
    npm install --save gulp-clean      //     
    npm install --save browser-sync    //           
    npm install --save gulp-shell      //  shell  
    npm install --save gulp-ssh        //      
    npm install --save run-sequence    //task    

glupfile. js 만 들 기

#   1
var gulp = require('gulp');
var pug = require('gulp-pug');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('html', function(){
  return gulp.src('client/templates/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('js', function(){
  return gulp.src('client/javascript/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'))
});

gulp.task('default', [ 'html', 'css', 'js' ]);

glup 문법

glup.src() 전 환 된 파일

gulp.src(globs[, options])
globs : String or Array

glup.src('client/template/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(glup.dest('build/minifiled_templates'))

//   
client/
  a.js
  bob.js
  bad.js
glup.src(['client/*.js', '!client/b*.js', 'client/bad.js']) 
//    .js     ,    b    ,  bad.js

glup.dest() 데이터 흐름 이 파일 로 바 뀌 었 습 니 다

gulp.dest(path[, options])
path: String or Function

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))  //   
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));  //     

glup.task() 하나의 임무 성명

gulp.task(name [, deps, fn])
name: String       
deps: Array
fn: Function

gulp.task('somename', function() {
  // Do ...
});
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

glup.watch() 감시 파일 의 변동

gulp.watch(glob[, opts], tasks)
glob: String or Array
tasks: Array

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

glup 사용 사례

demo 1 디 렉 터 리 구 조 는 다음 과 같다.demo 1 의 index. html 를 압축 하여 src 안의 less 컴 파일, 통합, 압축, 이름 바 꾸 기, dist 에 저장 합 니 다.src 에 있 는 그림 을 압축 하여 dist 에 통합 합 니 다.src 에 있 는 js 는 코드 검사, 압축, 통합, dist 에 저 장 됩 니 다.

    + demo1
        + dist
            + css
                - merge.min.css
            + js
                - merge.min.js
            + imgs
                - 1.png
                - 2.png
            - index.html
        + src
            + css
                - a.css
                - b.css
            + js
                - a.js
                - b.js
            + imgs
                - 1.png
                - 2.png
            - index.html

    # glupfile.js
    var gulp = require('gulp');
    //     
    var minifycss = require('gulp-minify-css'), // CSS  
        uglify = require('gulp-uglify'), // js  
        concat = require('gulp-concat'), //     
        rename = require('gulp-rename'), //    
        clean = require('gulp-clean'), //     
        minhtml = require('gulp-htmlmin'), //html  
        jshint = require('gulp-jshint'), //js       
        imagemin = require('gulp-imagemin'); //    


    gulp.task('html', function() {
      return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
    });

    gulp.task('css', function(argument) {
        gulp.src('src/css/*.css')
            .pipe(concat('merge.css'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(minifycss())
            .pipe(gulp.dest('dist/css/'));
    });
    gulp.task('js', function(argument) {
        gulp.src('src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat('merge.js'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js/'));
    });

    gulp.task('img', function(argument){
        gulp.src('src/imgs/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/imgs'));
    });

    gulp.task('clear', function(){
        gulp.src('dist/*',{read: false})
            .pipe(clean());
    });

    gulp.task('build', ['html', 'css', 'js', 'img']);

$ glup build