タスク管理ツール - Gulp

javascript

概要

gulpの書き方を調査する｡

4系､Taskを使用した書き方

https://dotinstall.com/lessons/basic_gulp

gulp実行

> npx gulp mytask

サンプル

var gulp = require("gulp")

gulp.task("a", (done) => {
    console.log("a")
    done()
})

gulp.task("b", (done) => {
    console.log("b")
    done()
})

// 直列
gulp.task("mytask",
    gulp.series("a", "b")
);

// 並列
gulp.task("mytask",
    gulp.series(
        gulp.parallel("a", "b", function (done) {
            done()
        })
    )
);

4系推奨はこちらの書き方

gulp実行

> gulp default 
>  とか
> gulp build

直列

const { series } = require("gulp")

function clean(cb) {
    console.log("clean")
    cb();
}

function build(cb) {
    console.log("build")
    cb();
}


exports.build = build;
exports.default = series(clean, build);

並列

const { parallel } = require("gulp")

function js(cb) {
    cb();
    console.log("cb")
}

function css(cb) {
    cb();
    console.log("css")
}

exports.build = parallel(js, css)

直列･並列

const { series, parallel } = require("gulp")

function clean(cb) {
    console.log("clean")
    cb();
}

function csstrans(cb) {
    console.log("csstrans")
    cb();
}

function jstrans(cb) {
    console.log("jstrans")
    cb();
}

function jsbundle(cb) {
    console.log("jsbundle")
    cb();
}

function cssmin(cb){
    console.log("cssmin")
    cb();
}

function jsmin(cb) {
    console.log("jsmin")
    cb();
}

function publish(cb) {
    console.log("publish")
    cb();
}

exports.build = series(
    clean,
    parallel(
        csstrans,
        series(jstrans, jsbundle)
    ),
    parallel(
        cssmin,
        jsmin
    ),
    publish
);

ファイル操作

const { src, dest } = require("gulp");
const babel = require('gulp-babel');
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const concat = require("gulp-concat");

exports.default =function (){
    return src("src/*.js")
        .pipe(babel())
        .pipe(uglify())
        .pipe(concat("test.js"))
        .pipe(rename({extname: ".min.js"}))
        .pipe(dest("out/"));
}

●注意 koukitips.net

ファイル監視

const { watch } = require("gulp");

exports.default = function () {
    watch('src/*.js',{ events: 'all'}, function (cb) {
        console.log('file changed.');
        cb();
    });
}

参考

gulpjs.com

qiita.com

ics.media

chaika.hatenablog.com

フォルダの指定について

https://www.nxworld.net/services-resource/gulp-dest-to-keep-directory-and-file-structure.html