LoginSignup
1
2

More than 3 years have passed since last update.

JavaScriptとCSSのminifyを行う

Last updated at Posted at 2019-06-22

やりたいこと

  • JavaScriptやCSSのバンドルはしたくないけど、余計なコメントやデバッグコンソール出力は消したい
  • ライセンスコメントは記載したい
  • JavaScriptはES6の文法を使いたい(IE11でも使えるconstなどを利用したい)
  • TypeScriptやSassは使わなくてもminifyはしたいのでソースマップは欲しい

gulpfile.jsの例

const gulp = require('gulp');
const del = require('del');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const header = require('gulp-header');
const sourcemaps = require('gulp-sourcemaps');
const cleanCSS = require('gulp-clean-css');

// コメントを消した後で再度付与するライセンスコメント. UglifyJSで一部のコメントを残すこともできるが
// 正規表現での記載が必要なので後から付与することとした
const banner = [
  '/** ',
  ' * Library xxx',
  ' * Author: xxx',
  ' * License: xxx',
  ' */',
  ''
].join('\n');

// 出力ディレクトリを一旦削除
gulp.task('clean', function () {
  return del('dest/**', {
    force: true
  });
});

gulp.task('minify-js', function () {
  return gulp.src(['js/*.js'])
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify({
      compress: {
        drop_console: true // console出力を削除
      }
    }))
    .pipe(header(banner))
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dest/js/'));
});

gulp.task('minify-css', function () {
  return gulp.src('css/*.css')
    .pipe(sourcemaps.init())
    .pipe(cleanCSS({})) // specialCommentという/*!から始まるコメントは残る
    .pipe(header(banner))
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('dest/css/'));
});

gulp.task('default', gulp.series('clean', gulp.parallel('minify-js', 'minify-css')));

利用したモジュール

"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"del": "^4.1.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.2.0",
"gulp-header": "^2.0.7",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2"

実現できていないこと

  • 拡張子を.min.jsのように変更するためにgulp-renameを利用するとソースマップファイルの名前まで変わってしまったのでgulp-renameは利用していない

参照

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2