javascript 我-gulpfile.js

Posted 2021-05-04

var gulp = require("gulp");
var browsersync = require("browser-sync");
var plumber = require("gulp-plumber");
var webpackStream = require("webpack-stream");
var webpack = require("webpack");
var babel = require("gulp-babel");
var ts = require("gulp-typescript");
var sass = require("gulp-sass");
var csscomb = require("gulp-csscomb");

//browsersync
gulp.task("server", function() {
  browsersync.init({
    proxy: "localhost:8888/javascript/", //for mamp
    baseDir: "./"
  });
});

// webpack
var webpackConfig = require("../webpack.config"); // webpackの設定ファイルの読み込み

gulp.task("webpack", function() {
  //ebpackStreamの第2引数にwebpackを渡す
  return webpackStream(webpackConfig, webpack).pipe(gulp.dest("js"));
});

// babel
gulp.task("babel", function() {
  gulp
    .src("es/**/*.js")
    .pipe(plumber())
    .pipe(babel())
    .pipe(gulp.dest("js"));
});

//typescript
gulp.task("ts", function() {
  gulp
    .src("ts/**/*.ts")
    .pipe(plumber())
    .pipe(ts({ noImplicitAny: true }))
    .pipe(gulp.dest("js"));
});

//sass
gulp.task("sass", function() {
  gulp
    .src("sass/**/*scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(csscomb())
    .pipe(gulp.dest("css"));
});

// watch task
gulp.task("watch", ["server"], function() {
  gulp.watch("es/**/*.js", ["babel"]);
  gulp.watch("ts/**/*.js", ["ts"]);
  gulp.watch("sass/**/*.scss", ["sass"]);
  gulp.watch(["**/*.html"]).on("change", function() {
    browsersync.reload();
  });
});