Gulpを使用し始めて3日目（）

2291 ワード
gulp-uglify gulp minify gulp-clean-css gulp テキストリンク

Gulpを使用し始めて

CodeMafiaさんのGulpの動画見て、勉強し始めました。
以下がリンクです。
https://www.youtube.com/channel/UCQ8iiBr45MDWD7hDp3FDmQg

Gulpで基本的な画像の圧縮、サイズ変更、ScssからCSSに変換、babelを使用したりと
以外に面白かったです。

今回は動画には無かったCSSとJSの圧縮をやったので、アウトプット。
自分が分かるようにコードを乗せて置くだけですが（笑）

下準備

CSSとJSの圧縮用のプラグインをインストール。(私はnpmでインストールしています。)

$ npm install -D gulp-clean-css
$ npm install -D gulp-uglify

次にgulpでプラグインをまとめて読み込みます [gulp-load-plugins]
ここはCodeMafiaさんの動画でも紹介されています。

const {src, dest} = require('gulp');
const loadPlugins = require('gulp-load-plugins');
const $ = loadPlugins();

CSS圧縮

以下のコードを書いたら無事動きました。

// cssの圧縮
function clean() {
  return src('./src/css/*.css')
      .pipe($.cleanCss())
      .pipe(dest('./dist/css'));
}
exports.clean = clean;

JS圧縮

//jsの圧縮
function uglify() {
  return src('./src/js/*.js')
      .pipe($.uglify())
      .pipe(dest('./dist/js'));
}
exports.uglify = uglify;

出力結果

//CSSの圧縮
h1{color:#663399}h2{width:300px;height:200px;background-color:#bc8f8f}

//JSの圧縮
const init=()=>{console.log(hello("Bob","Tom"))};function hello(...e){return e.reduce((e,o)=>`Helo Helo! ${e} ${o}`)}document.addEventListener("DOMContentLoaded",e=>{init()});

こんな風に一列になるので、最高に面白かったです。
次はseries, parallelを使って、もっとまとめてやりたいですね。
頑張ります。

以上、ありがとうございました。