gulp触ってみた - もがき系プログラマの日常

はじめに

こんばんは。

しょうもない記事です。

何番煎じだって話ですが、gulp触ってみました。

webpackはvueやreactの勉強時に何回か登場してたので触ったことあったのですが、gulpは触ったことなかったからですね。

あと、別の理由としては、今お仕事もらっている会社でgulpを使用中なのですが、gulpを導入した唯一のフロントエンドの方が自分がjoinする前に退職したようで、誰もgulp触れないって状況が怖いなと感じたので、この際覚えようと思ったからです。

なので、今回やったのは、使ってみたプラグインの紹介的な感じです。

やってみた

実際使ってみたのは、以下

gulp-minify-css
gulp-autoprefixer
gulp-uglify

gulp-minify-css

cssを圧縮できるプラグインで、指定したパスにあるcssファイルを圧縮してくれます。

const gulp_minify_css = require('gulp-minify-css');
gulp.task('task_minify_css', function() {
    return gulp.src("/public/css/**/*.css")
                .pipe(gulp_minify_css())
                .pipe(gulp.dest("/public/css/"));
});

gulp-autoprefixer

ベンダープレフィックスを付け加えてくれます。

const gulp_autoprefixer = require('gulp-autoprefixer');
gulp.task('task_vendor_prefix_css', function() {
        return gulp.src("/public/css/**/*.css")
                 .pipe(gulp_autoprefixer({
                         browsers: ['last 5 versions'],
                         cascade: false
                 }))
                 .pipe(gulp.dest("/public/css/"));
});

gulp-uglify

JSの圧縮化 & 難読化をしてくれます。

const gulp_uglify = require('gulp-uglify');
gulp.task('task_uglify_js', function() {
    return gulp.src(["/public/js/**/*.js")
        .pipe(gulp_uglify())
        .pipe(gulp.dest("/public/js/"));
});