JavaScript
gulp

gulp開発環境テンプレート

More than 1 year has passed since last update.

webpack、npm-scriptsに押され気味のgulpですが、まだまだ案件で使われることも多いと思います。

そんな案件にアサインされたときにサクッと環境を整える為に投稿。

想定しているサイトの規模は小〜中規模案件。

gulpの導入手順などは割愛。

これから初めて使うという方はこの辺が参考になるかと思います。

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

階層構造はこんな感じ

hoge

├─ dist
│ ├─ css
│ │ └─ *.css
│ ├─ img
│ │ └─ *
│ ├─ js
│ │ └─ *.js
│ └─ *.html
├─ src
│ ├─ ejs
│ │ └─ *.ejs
│ ├─ js
│ │ └─ *.js
│ ├─ sass
│ │ └─ *.scss
│ └─ spriteimg
│ └─ *
├─ gulpfile.js
└─ package.json

package.jsonはこんな感じ


package.json

{

"name": "hoge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^14.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-cssmin": "^0.1.7",
"gulp-ejs": "^3.0.0",
"gulp-imagemin": "^3.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-uglify": "^2.1.2",
"gulp-webserver": "^0.9.1",
"gulp.spritesmith": "^6.4.0",
"imagemin-guetzli": "^0.1.5",
"watchify": "^3.9.0"
}
}

gulpfileはこんな感じ


gulpfile.js

var gulp = require('gulp');

var ejs = require('gulp-ejs');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var spritesmith = require('gulp.spritesmith');
var webserver = require('gulp-webserver');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var imageminGuetzli = require('imagemin-guetzli');
var browserify = require('browserify');
var watchify = require('watchify');

gulp.task('ejs', function() {
return gulp.src(['src/ejs/*.ejs', '!src/ejs/_*.ejs']) // ファイル名に_が付いたejsファイルはhtmlとして出力しない
.pipe(ejs())
.pipe(rename({
extname: '.html'
}))
.pipe(gulp.dest('dist/'));
});

gulp.task('sass', function() {
return gulp.src(['src/sass/*.scss', 'src/sass/**/*.scss'])
.pipe(sass())
.pipe(autoprefixer({
browsers: ['iOS 7', 'android 2.1'] // レギュレーションに合わせた設定
}))
.pipe(gulp.dest('dist/css/'));
});

gulp.task('sprite', function () {
var spriteItem = gulp.src('src/spriteimg/*.png') //スプライトする画像
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: '_sprite.scss',
imgPath: 'img/sprite.png',
cssFormat: 'scss',
cssVarMap: function (sprite) {
sprite.name = 'sprite-' + sprite.name;
}
}));
spriteItem.img.pipe(gulp.dest('dist/img/')); //imgNameで指定したスプライト画像の保存先
spriteItem.css.pipe(gulp.dest('src/sass/')); //cssNameで指定したcssの保存先
});

gulp.task('browserify', function() {
return jscompile(false);
});

gulp.task('watchify', function() {
return jscompile(true);
});

function jscompile(is_watch) {
var bundler;
if (is_watch) {
bundler = watchify(browserify('src/js/main.js'));
} else {
bundler = browserify('src/js/main.js');
}
function rebundle() {
return bundler
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/js'));
}
bundler.on('update', function() {
rebundle();
});
bundler.on('log', function(message) {
console.log(message);
});
return rebundle();
}

// ウォッチタスク ejs/sass/jsが保存されると自動でコンパイル
gulp.task('watch', function() {
gulp.watch(['src/ejs/**/*.ejs', 'src/ejs/*.ejs', '!src/ejs/common/_*.ejs'], ['ejs']);
gulp.watch(['src/sass/*.scss', 'src/sass/**/*.scss'], ['sass']);
gulp.watch(['src/js/main.js'], ['watchify']);
});

// リリース用 画像圧縮、css/js難読化
gulp.task('cssmin', function () {
return gulp.src('dist/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});

gulp.task('uglify', function() {
return gulp.src(['dist/js/*.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
});

gulp.task('imgmin', function () {
return gulp.src('dist/img/*')
.pipe(imagemin([imageminGuetzli()]))
.pipe(gulp.dest('dist/img'))
});

gulp.task('release', ['cssmin', 'imgmin', 'uglify'], function() {
return gulp.src(['dist/css/*.css', 'dist/img/*', 'dist/js/*.js']);
});

// 参照・ライブリロード用WEBサーバ
gulp.task('webserver', function() {
gulp.src('dist/')
.pipe(webserver({
livereload: true,
directoryListing: true,
open: false
}));
});



ざっと解説

仮想サーバーやスプライト画像は必要ない場合は、それに応じたタスクを省いて問題ありません。

出力されるファイルなど
gulpのタスク

html
gulp-ejs

css
gulp-sass/gulp-cssmin/gulp-autoprefixer

js
browserify/watchrify/gulp-uglify

img
gulp-imagemin/imagemin-guetzli

スプライト画像
gulp.spritesmith

仮想サーバー
gulp-webserver

autoprefixerのバージョン指定は直近のレギュレーションだったiOS7/Android2.1を指定。

もっと簡潔な書き方や、違うパッケージの方がいいよ!などありましたら教えて欲しいです!