[Javascript] gulp 사용법

gulp

https://github.com/gulpjs/gulp - 31,335
    - v4.0.2 , 2019/05

https://gulpjs.com/


*설치
    - gulp-cli 와 gulp 전역설치
npm install gulp-cli -g
npm install gulp -g

    - 프로젝트 폴더로 이동

    - package.json 생성
npm init

    - 개발 모드로 설치
        - gulp가 전역으로 설치되어 있으면 다음은 필요없음
npm install gulp -D

    - gulpfile.js 파일 생성
npx -p touch nodetouch gulpfile.js


//=================
* plugin 설치
npm install gulp-sass gulp-stylus gulp-clean-css gulp-concat gulp-uglify gulp-babel gulp-rename del --save-dev
npm install --save-dev @babel/core @babel/preset-env


//
https://github.com/alferov/awesome-gulp#plugins

//
gulp-sass : Sass → CSS with libsass.
gulp-stylus : Stylus → CSS.
gulp-typescript : TypeScript → JavaScript.
gulp-clean-css : CSS optimizer(압축)

gulp-concat : 파일 합치기
gulp-uglify : 자바스크립트 압축, 난독화
gulp-rename : 파일 이름 변경 (원본,압축)
gulp-babel : ES6 -> ES5


//================================
* gulpfile.js 파일 작성

    - 파일 샘플
https://github.com/gulpjs/gulp
//===============
var gulp = require('gulp');
var sass = require('gulp-sass');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');
var del = require('del');

//경로 설정
var paths = {
  styles: {
    src: 'src/styles/**/*.scss',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};


function clean() {
  return del([ 'assets' ]);
}

// 각 작업용 함수 ( gulp.task() 기능 )
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

/*
 * Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * You can use CommonJS `exports` module notation to declare tasks
 */
exports.clean = clean;
exports.styles = styles;
exports.scripts = scripts;
exports.watch = watch;
exports.build = build;

// gulp 기본 실행 옵션
exports.default = build;


//===========
* 에러
    - 에러 메시지
internal/modules/cjs/loader.js
Error: Cannot find module '@babel/core'

    - 해결방법
npm install --save-dev @babel/core @babel/preset-env



//===========
//참고 , babel 설치
npm install --save-dev babel-cli
npm install --global babel