Instantly share code, notes, and snippets.

Embed
What would you like to do?
sample gulpfile.js
// Original: https://github.com/gaspanik/gulpbase/
// Update 0.2.0
var gulp = require('gulp'),
// 列挙するのが面倒なので、load-pluginsでプラグインをロード。何使ってるかは「package.json」で
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/
});
// タスクの処理を指定した順番でおこなうために「run-sequence」を利用
var runSequence = require('run-sequence');
// ライブリロードのために「browser-sync」を利用
var browserSync = require('browser-sync');
// ソースディレクトリとか、ファイル名を指定。「"hoge/**/*.js"」みたいな書き方もできる
var paths = {
"tplSrc": "_templates/**",
"htmlSrc": "_templates/*.jade",
"lessSrc": "_less/*.less",
"scssSrc": "_scss/*.scss",
"jsSrc": "_js/*.js",
"imgSrc": "_images/**",
"rootDir": "dist/",
"imgDir": "dist/images/"
}
// Browser-Syncの起動設定。通知がいらなければ、notifyをfalseに
gulp.task('bs', function() {
browserSync.init({
server: {
baseDir: paths.rootDir,
// directory: true,
// index: "index.html"
},
notify: true,
xip: false
});
});
// JadeをHTMLに変換
gulp.task('html', function() {
return gulp.src(paths.htmlSrc)
// .jadeをHTMLに変換してね
.pipe($.jade())
// 書き出し先は、rootDirのとこね
.pipe(gulp.dest(paths.rootDir))
// Minifyされるのがいやなら、下の2行のコメントをとって
// .pipe($.prettify())
// .pipe(gulp.dest('dist'))
// 処理が終わったらBrowser-Syncをリロード
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('less', function() {
return gulp.src(paths.lessSrc)
// sourcemapsを付けとこかな
.pipe($.sourcemaps.init())
// lessを変換しましょうね
.pipe($.less())
// ベンダープリフィクスを付けとこね
.pipe($.autoprefixer({
browsers: ['last 2 versions']
}))
// 書き出し先は、css/の中ね
.pipe(gulp.dest(paths.rootDir + 'css'))
// ファイルをリネームするよ(.min.cssに)
.pipe($.rename({
suffix: '.min'
}))
// Minifyかけとこね
.pipe($.csso())
// もう一回書き出しね
.pipe(gulp.dest(paths.rootDir + 'css'))
// はい、リロードしてね
.pipe(browserSync.reload({
stream: true,
once: true
}));
});
gulp.task('scss', function() {
return gulp.src(paths.scssSrc)
.pipe($.sourcemaps.init())
.pipe($.sass())
.pipe($.autoprefixer({
browsers: ['last 2 versions']
}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(paths.rootDir + 'css'))
.pipe($.rename({
suffix: '.min'
}))
.pipe($.csso())
.pipe(gulp.dest(paths.rootDir + 'css'))
.pipe(browserSync.reload({
stream: true,
once: true
}));
});
gulp.task('scripts', function() {
return gulp.src(paths.jsSrc)
.pipe($.sourcemaps.init())
// jsをMinifyしてね
.pipe($.uglify())
// jsSrcにあるjsをall.jsで一個にまとめてね
.pipe($.concat('all.js'))
.pipe($.sourcemaps.write())
.pipe(gulp.dest(paths.rootDir + 'js'));
});
gulp.task('image', function() {
return gulp.src(paths.imgSrc)
// 書き出し先のimgDirの中をみて、新しいものだけ処理してね
.pipe($.changed(paths.imgDir))
// 画像を最適化しちゃうよ
.pipe($.imagemin({
optimizationLevel: 3
})) // See gulp-imagemin page.
// はい、終わったらそこに入れといて
.pipe(gulp.dest(paths.imgDir));
});
// Sequential tasks demo. Try to run 'npm run-script gulpbuild' or 'gulp build'.
gulp.task('build', function() {
// この順番でこれまでのタスクを実行してね。このbuildタスクはデフォルトの処理にはいれてないよ
runSequence(
'image',
'html',
['less', 'scripts'] // less and scripts task in parallel.
);
});
// 監視を別のタスクとして書くならこう
// Individual watch task.
// gulp.task('watch', function() {
// gulp.watch([paths.tplSrc], ['html']);
// gulp.watch([paths.lessSrc], ['less']);
// gulp.watch([paths.scssSrc], ['scss']);
// gulp.watch([paths.imgSrc], ['image']);
// });
// If you would like to use Sass/SCSS, switch 'less' to 'scss'.
gulp.task('default', ['image', 'bs', 'scripts', 'less', 'html'], function() {
gulp.watch([paths.tplSrc], ['html']);
gulp.watch([paths.lessSrc], ['less']);
// gulp.watch([paths.scssSrc], ['scss']);
gulp.watch([paths.imgSrc], ['image']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment