クリスマスだけどgulpを初めて使ったのでgulpfile.jsを載せてみた

ブログ開始しました

みなさんメリークリスマス。ブログ開始しました。ここでは技術的なことに関するフィードバックを期待しながら記事を書きます。基本的には書き溜めたメモのアウトプットをします。Qiitaの方でもアカウントがあり、記事も投稿していますが、こちらでは技術的な知識の提供よりかは、日記のような感じになったり、技術的な疑問点などを書くことになると思います。

ここ間違っているよとか、ここはこうした方がいいよとかあれば、是非コメントしてください。

gulpfile.jsを書いてみた

gulpを初めて触ったので、gulpfile.jsを載せてみます。

今回は、シングルページの作成を、jade、scssで書いてみただけなので、小規模にしました。

使ったもの

• gulp-jade
• gulp-sass
• gulp-plumber
• browser-sync
• gulp-uglify

一応説明。

gulp-jadeとgulp-sassはそれぞれ、.jadeと.scssのコンパイルに

gulp-plumberはエラーによるgulpの終了を防ぎます。watchとかbrowser-syncとか使っているときは必須ではないですかね。

browser-syncは、ローカルサーバーを建てて、プロジェクト内のファイルを内部に公開。複数端末でテストするときに便利でした。

gulp-uglifyは、javascriptの圧縮に。ただ書いたコードが少ないので、今回は必要性は薄いかも

ソースコード

'use strict';
var gulp = require("gulp"),
    uglify = require('gulp-uglify'),
    plumber = require('gulp-plumber'),
    jade = require('gulp-jade'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task("default", function() {
    browserSync({
        notify: false,
        port: 3000,
        server: {
            baseDir: ["./public/"]
        }
    });
    gulp.watch(["./src/scss/*.scss"],["scss"]);
    gulp.watch(["./src/*.jade", "./src/includes/*.jade"],["jade"]);
    gulp.watch(["./src/js/*.js"], ["scripts"]);
});

gulp.task("scss", function () {
    gulp.src(["./src/scss/*.scss"])
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest("./public/css/"));
});

gulp.task("jade", function () {
    gulp.src(["./src/index.jade"])
        .pipe(plumber())
        .pipe(jade())
        .pipe(gulp.dest("./public/"));
});

gulp.task("scripts", function () {
    gulp.src(["./src/js/*.js"])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(gulp.dest("./public/js/"));
});

gruntを使ったことがあってので、gruntと似ていた点がある分書きやすかったです。

cssとかも、gulp-cssminで圧縮できるみたいですが、cssの方もあんまり書いていないので使いませんでした。

後は使用したモジュールも結合して圧縮するほうが良かったかもしれませんかね。モジュールの結合にはwebpackという便利なものがあるみたいですが。

小規模な開発におけるgulpfile.jsですが、これ使ったほうがいいとかありませんかね？