GulpやWebpackなど、開発ツール色々なパターン

開発環境の色々なパターンメモ書き。
もうあまりGulp使っている人いないんですかね…私はまだまだ現役で使用しています。

GulpでWebpackを使用

CSSはそのままでJavaScriptのみをバンドル

[box text=”使用する機能”]
  • SASS
  • Babel
  • Autoprefixer
  • BrowserSync
  • Watch
[/box]

フォルダ構成

├── gulpfile.js
├── package.json
├── webpack.config.js
├── dist
│   └── js
│   │   └── bundle.js
│   └── css
│       └── style.css
└── src
    └── js
    │   └── main.js
    └── sass
        └── style.scss

package.json

{
  "description": "my-package",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "autoprefixer": "^9.5.0",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "webpack": "^4.40.2",
    "webpack-stream": "^5.2.1"
  },
  "dependencies": {}
}

gulpfile.js

const gulp = require('gulp')

//***★★★ SASS & Autoprefixer ここから ★★★***
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')

const postcssOption = [autoprefixer({
    grid: "autoplace",
    browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
})]
gulp.task('sass', () => { 
    return gulp
    .src('./src/sass/style.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist/css/'))
})
//***★★★ //SASS & Autoprefixer ★★★ここまで ***

//***★★★ Webpack ここから ★★★***
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config");
gulp.task('bundle', () => {
  return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest('./dist/js'));
});
//***★★★ Webpack ここまで ★★★***

//***★★★ BrowserSync ここから ★★★***
const browserSync = require('browser-sync').create()
gulp.task('serve', (done) => {
  browserSync.init( {
    server: './dist'
  })
  done()
})
//***★★★ //BrowserSync ここまで ★★★***

//***★★★ WATCH ここから ★★★***
gulp.task('watch', () => {
    const browserReload = (done) => {
        browserSync.reload()
        done()
      }
    const wbrowser = gulp.watch('./dist/**/*', browserReload)
    const wsass = gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
    const wbundle = gulp.watch('src/js/**/*.js', gulp.series('bundle'))
gulp.series('babel'))
    return {wbrowser:wbrowser, wsass:wsass, wbundle:wbundle }
})

gulp.task('default', gulp.series('serve', 'watch'))
//***★★★ //WATCH ここまで ★★★***

webpack.config.js

module.exports = {
  // development ソースマップを有効にする場合
  mode: "production",

  entry: "./src/js/main.js",
  output: {
    filename: "./dist/js/bundle.js"
  }
}

Gulp

Babelは使用するもののJavaScriptの圧縮はせず、後から誰でも編集できるようにする場合

[box text=”使用する機能”]
  • SASS
  • Babel
  • Autoprefixer
  • BrowserSync
  • Watch
[/box]

フォルダ構成

├── gulpfile.js
├── package.json
├── dist
│   └── js
│   │   └── script.js
│   └── css
│       └── style.css
└── src
    └── babel
    │   └── script.js
    └── sass
        └── style.scss

package.json

{
  "description": "my-package",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "autoprefixer": "^9.5.0",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2"
  },
  "dependencies": {}
}

gulpfile.js

const gulp = require('gulp')

//***★★★ SASS & Autoprefixer ここから ★★★***
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')

const postcssOption = [autoprefixer({
    grid: "autoplace",
    browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
})]
gulp.task('sass', () => { 
    return gulp
    .src('./src/sass/style.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss(postcssOption))
    .pipe(gulp.dest('./dist/css/'))
})
//***★★★ //SASS & Autoprefixer ★★★ここまで ***

//***★★★ BABEL ここから ★★★***
const babel = require('gulp-babel')
gulp.task('babel', () => {
    return gulp
        .src('./src/babel/**/*.js')
        .pipe(babel({
          presets: ['@babel/env']
        }))
        .pipe(gulp.dest('./dist/js/'))
})
//*** BABEL ここまで ***

//***★★★ BrowserSync ここから ★★★***
const browserSync = require('browser-sync').create()
gulp.task('serve', (done) => {
  browserSync.init( {
    server: './dist'
  })
  done()
})
//***★★★ //BrowserSync ここまで ★★★***

//***★★★ WATCH ここから ★★★***
gulp.task('watch', () => {
    const browserReload = (done) => {
        browserSync.reload()
        done()
      }

    const wbrowser = gulp.watch('./dist/**/*', browserReload)
    const wsass = gulp.watch('./src/sass/**/*.scss', gulp.series('sass'))
    const wbabel = gulp.watch('./src/babel/**/*.js', gulp.series('babel'))
    return {wbrowser:wbrowser, wsass:wsass, wbabel:wbabel}
})

gulp.task('default', gulp.series('serve', 'watch'))
//***★★★ //WATCH ここまで ★★★***

Webpack

JavaScriptだけ必要な場合

[box text=”使用する機能”]
  • Babel
  • Watch
[/box]

ファイル構成

├── package.json
├── webpack.config.js
├── dist
│   └── js
│       └── bundle.js
└── src
    └── js
        └── main.js
[box text=”実行”]
  • npm run dev
  • npm run prod
[/box]

package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prod": "webpack --mode production",
    "dev": "webpack --mode development -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.0-beta.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1"
  }
}

webpack.config

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: './js/script.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ