【Gulper】全てのフロントエンドエンジニアに捧ぐ最強環境フレームワーク

$ git clone https://github.com/yuuumbk/gulper.git && cd gulper && npm run start && gulp

$ node -v
v14.16.0
$ npm -v
7.16.0

$ mkdir gulper
$ cd gulper

$ git clone git@github.com:yuuumbk/gulper.git .
# または
$ git clone https://github.com/yuuumbk/gulper.git .

$ npm run start

$ gulp

.
└── src
    ├── assets # # HTMLファイル以外
    │   ├── css/ # CSSファイル
    │   ├── img/ # 画像
    │   ├── js/ # JavaScriptファイル
    │   └── sass/ # Sassファイル
    ├── ejs/ # ejsファイル
    ├── pug/ #　Pugファイル
    └── index.html #　HTMLファイルはsrcディレクトリ直下

.
├── dist
│   ├── assets
│   │   ├── css/
│   │   └── js/
│   └── index.html
├── src
│   ├── assets
│   │   ├── css/
│   │   ├── img/
│   │   ├── js/
│   │   └── sass/
│   ├── ejs/
│   ├── pug/
│   └── index.html
├── gulpfile.js/
├── config
│   ├── gulp.example.json
│   └── gulp.json
├── package-lock.json
├── package.json
├── .gitignore
├── LICENSE
└── README.md

{
  "paths": { 
    "root": "./dist", # destディレクトリのルート
    "siteUrl": "https://example.com", # サイトURL（サイトマップタスクで必須）
    "html": { # HTML
      "src": "./src/**/*.{html,htm}", #監視対象ファイル
      "dest": "./dist", # 出力先ディレクトリ
      "index": "index.html" #　インデックスファイル
    },
    "pug": { #Pug
      "src": "./src/pug/**/*.pug", # 監視対象ファイル
      "dest": "./dist" # 出力先ディレクトリ
    },
    "ejs": { #ejs
      "src": "./src/ejs/**/*.ejs", # 監視対象ファイル 
      "srcBuild": [ # 実際に出力するファイル
        "./src/ejs/**/*.ejs",  
        "!./src/ejs/**/_*.ejs" # "_"から始まるファイルは出力しない
      ],
      "dest": "./dist" #　出力先ディレクトリ
    },
    "sass": {
      "src": "./src/assets/sass/**/*.scss", # 監視対象ファイル
      "dest": { # 出力先ディレクトリ
        "expand": "./dist/assets/css", # 通常ファイル
        "compress": "./dist/assets/css", # 圧縮ファイル
        "nest": "./dist/assets/css", # ネストファイル
        "compact": "./dist/assets/css"　# コンパクトファイル
      }
    },
    "css": {
      "src": "./src/assets/css/**/*.css", # 監視対象ファイル
      "dest": { # 出力先ディレクトリ
        "expand": "./dist/assets/css", # 通常ファイル
        "compress": "./dist/assets/css" # 圧縮ファイル
      }
    },
    "js": {
      "src": "./src/assets/js/**/*.js", # 監視対象ファイル
      "dest": {　# 出力先ディレクトリ
        "expand": "./dist/assets/js", # 通常ファイル
        "compress": "./dist/assets/js" # 圧縮ファイル
      }
    },
    "img": {
      "src": "./src/assets/img/**/*.{jpg,JPG,jpeg,JPEG,png,PNG,gif,GIF,svg,SVG}", # 監視対象ファイル
      "dest": "./dist/assets/img" # 出力先ディレクトリ
    },
    "browser": {
      "src": "./src/**", # 監視対象ファイル
      "dest": "./dist/**" # 出力先ディレクトリ
    },
    "delMap": [　# 削除対象マップファイル
      "./dist/**/*.css.map", 
      "./dist/**/*.js.map",
      "./dist/sitemap.xml"
    ]
  },
  "ftp": {
    "host": "FTP_HOST", # サーバーホスト名
    "user": "", # サーバーユーザー名
    "password": "", # サーバーパスワード
    "remoteRoot": "/public_html", # サーバールートディレクトリ
    "localRoot": "./dist", # ローカルルートディレクトリ（destディレクトリ）
    "include": [ # 対象ファイル
      "*"
    ],
    "exclude": [ # 除外ファイル
      "*.css.map",
      "*.scripts.map"
    ],
    "deleteRemote": false, # アップロードの都度サーバーのファイルを削除するかどうか
    "forcePasv": true, # パッシブモードを強制する
    "sftp": false, # SFTPまたはFTP
    "debounceDelay": 10000 # アップロード間隔
  },
  "overrideBrowserslist": [ # CSSオートプレフィックス
    "last 2 versions",
    "> 2%"
  ],
  "pug": { 
    "pretty": true # コンパイル時に改行とインデントを挿入する。
  },
  "ejs": {
    "ext": ".html" # 出力ファイル拡張子
  },
  "sass": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true, # 圧縮
      "nest": false, # ネスト
      "compact": false # コンパクト
    }
  },
  "css": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true # 圧縮
    }
  },
  "js": {
    "outputStyle": { # 出力スタイル
      "expand": false, # 通常
      "compress": true # 圧縮
    },
    "bundle": {
      "name": "bundle.js", # バンドルファイル名
      "src": [ # バンドル対象ファイル
        "./dist/assets/js/**/*.js"
      ],
      "dest": "./dist/assets/js" # 出力先ディレクトリ
    }
  },
  "propertySort": "smacss", # CSSプロパティソート: samcss, alphabetically, concentric-css
  "sourcemaps": { # ソースマップ拡張子
    "sass": ".",
    "css": ".",
    "js": "."
  },
  "suffix": {
    "ejs": ".html",
    "sass": {
      "expand": "", # 通常
      "compress": ".min", # 圧縮
      "nest": "", # ネスト
      "compact": "" # コンパクト
    },
    "css": {
      "expand": "", # 通常
      "compress": ".min" # 圧縮
    },
    "js": {
      "expand": "", # 通常
      "compress": ".min" # 圧縮
    }
  },
  "map": { # バップファイルを生成するかどうか
    "sass": true,
    "css": true,
    "js": true
  },
  "imagemin": {
    "pngquant": { # PNG
      "quality": { # 圧縮度
        "min": 0.6,
        "max": 0.8
      },
      "mozjpeg": { # JPG
        "quality": 80 # 圧縮度
      }
    }
  },
  "browser": {
    "port": 3000, # ブラウザポート
    "reloadThrottle": 3000, # リロード間隔
    "reloadOnRestart": true 
  }
}