gulpハンズオン用

directory_structure.txt

- app
  ├- node_modules
  ├- package.json
  ├- src
  │   ├- js
  │   ├- scss
  │   └- images
  │
  └- dist
      ├- js
      ├- css
      └- images

gulpfile.js

const gulp         = require('gulp'),
      sass         = require('gulp-sass'),
      minifycss    = require('gulp-minify-css'),
      uglify       = require('gulp-uglify'),
      babel        = require('gulp-babel'),
      eslint       = require('gulp-eslint'),
      concat       = require('gulp-concat'),
      rename       = require('gulp-rename'),
      imagemin     = require('gulp-imagemin'),
      plumber      = require('gulp-plumber'),
      pngquant     = require('imagemin-pngquant'),
      run_sequence = require('run-sequence')

const opts = {
   path: {
               js: 'src/js',
            scss: 'src/scss',
           images: 'src/images',
             dist: 'dist',
          dist_js: 'dist/js',
         dist_css: 'dist/css',
      dist_images: 'dist/images'
   },
   min_suffix: '.min',
   base_name: 'bundle'
}

// sass
gulp.task('css', () => {
   return gulp.src(`${opts.path.scss}/**/*.scss`)
      .pipe(sass({
         outputStyle: 'expanded'
      })).on('error', sass.logError)
      .pipe(concat(`${opts.base_name}.css`))
      .pipe(minifycss())
      .pipe(rename({suffix: opts.min_suffix}))
      .pipe(gulp.dest(opts.path.dist_css))
})

// js
gulp.task('js', () => {
   return gulp.src(`${opts.path.js}/**/*.js`)
      .pipe(plumber({
         errorHandler: (error) => {
            const task_name = 'build js'
            const title = `[task] ${task_name} error.plugin`
            const error_msg = `error: ${error.message}`
            console.error(`${title} \n${error_msg}`)
         }
      }))
      .pipe(babel({
         presets:['env']
      }))
      .pipe(eslint({ useEslintrc: false }))
      .pipe(eslint.format())
      .pipe(concat(`${opts.base_name}.js`))
      .pipe(uglify())
      .pipe(rename({suffix: opts.min_suffix}))
      .pipe(gulp.dest(opts.path.dist_js))
})

// images
gulp.task('image', () => {
   return gulp.src(`${opts.path.images}/**/*.(jpg|gif|png)`)
      .pipe(imagemin({
         use: [
            pngquant({
               quality: 60 - 80,
               speed: 1
            })
         ]
      }))
      .pipe(gulp.dest(opts.path.dist_images))
})

// test run
gulp.task('test', () => {
   console.log('gulp run !!\n')
})

// watch
gulp.task('watch', () => {
   gulp.watch(`${opts.path.js}/**/*.js`, ['js'])
   gulp.watch(`${opts.path.style}/**/*.scss`, ['css'])
   gulp.watch(`${opts.path.images}/**/*`, ['image'])
})

// default
gulp.task('default', () => {
   return run_sequence(
      'js',
      'css',
      'image'
   )
})

package.json

{
  "name": "gulp",
  "description": "",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^4.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "imagemin-pngquant": "^5.1.0",
    "run-sequence": "^2.2.1"
  },
  "scripts": {
    "build": "gulp",
    "build:js": "gulp js",
    "build:css": "gulp css",
    "build:image": "gulp image",
    "dev": "gulp watch"
  },
  "author": "k-kuwahara",
  "license": "MIT"
}

sample.js

'use strict'

class User {
  constructor(name) {
    this._name = name;
  }

  say() {
    return `My name is ${this._name}`;
  }
}

class Admin extends User {
  say() {
    return `[Administrator] ${uper.say()}`;
  }
}

var user = new User('Alice');
console.log(user.say()); // My name is Alice

var admin = new Admin('Bob');
console.log(admin.say()); // [Administrator] My name is Bob

sample1.scss

/* sample1 */
@import 'sample2.scss';
$red: #ff1122;

.notes {
  color: $red;
}
#main {
  .notesArea {
    border: 1px solid $red;
  }
}

sample2.scss

/* sample2 */
#main {
  width: 600px;
  p {
    margin: 0 0 1em;
    em {
      color: #f00;
    }
  }
}