Skip to content

Instantly share code, notes, and snippets.

@masamunet

masamunet/file2.txt

Last active October 26, 2016 06:46
Show Gist options
  • Save masamunet/ce34617db7fe0a4cc4dc2f2a7139367d to your computer and use it in GitHub Desktop.
Save masamunet/ce34617db7fe0a4cc4dc2f2a7139367d to your computer and use it in GitHub Desktop.
Download ZIP
中小規模向けウェブサイト制作いい感じgulp環境を考えてみた ref: http://qiita.com/masamunet/items/ca3888c9fe3297272c83
Raw
file2.txt
npm run start
Raw
file3.txt
slack = require('gulp-slack')({
url: '*Your Webhook URL*'
});
Raw
file4.txt
npm run build
Raw
gistfile.js
var gulp = require('gulp'),
os = require('os'),
del = require('del'),
runSequence = require('run-sequence'),
webserver = require('gulp-webserver'),
pug = require('gulp-pug'),
sass = require('gulp-sass'),
coffee = require('gulp-coffee'),
slack = require('gulp-slack')({
url: '*Your Webhook URL*'
});
const config = {
src: 'src',
dist: 'public',
assets: 'assets',
};
// IPアドレスを取得
getIPAddress = ()=>{
var ifaces = os.networkInterfaces();
var ipaddress;
Object.keys(ifaces).forEach((ifname) =>{
ifaces[ifname].forEach((iface)=>{
if(iface.family !== 'IPv4' || iface.internal != false){
return;
}
ipaddress = iface.address;
});
});
return ipaddress;
};
var ipaddress = getIPAddress();
//Webサーバー
gulp.task('webserver', () => {
return gulp.src(config.dist)
.pipe(webserver({
livereload: true, //ライブリロード
host: '0.0.0.0' // IPアドレスで起動
}))
//slackにアドレスを通知。
.pipe(slack(`http://${ipaddress}:8000/`));
});
//コピー
gulp.task('copy', ()=>{
return gulp.src(`./${config.assets}/**`)
.pipe(gulp.dest(`./${config.dist}`))
});
gulp.task('copy:watch', ()=>{
gulp.watch(`./${config.assets}/**`, ['copy']);
});
//pug
// _ アンダーバーから始まる、インクルードファイルをコンパイルしない
const watchPugFile = `./${config.src}/**/*.pug`;
const pugFiles = [watchPugFile, `!./${config.src}/**/_*.pug`];
gulp.task('pug:dev', () => {
return gulp.src(pugFiles)
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(config.dist))
});
gulp.task('pug', () => {
return gulp.src(pugFiles)
.pipe(pug({
pretty: false
}))
.pipe(gulp.dest(`./${config.dist}/`))
});
gulp.task('pug:watch', () =>{
return gulp.watch(watchPugFile, ['pug:dev']);
});
//sass
const watchSassFile = `./${config.src}/**/*.scss`;
const sassFiles = [watchSassFile, `!./${config.src}/**/_*.scss`];
gulp.task('sass', () => {
return gulp.src(sassFiles)
.pipe(sass.sync().on('errer', sass.logError))
.pipe(gulp.dest(config.dist))
});
gulp.task('sass:watch', () =>{
return gulp.watch(watchSassFile, ['sass']);
});
//coffee
const coffeeFiles = `./${config.src}/**/*.coffee`;
gulp.task('coffee', () =>{
return gulp.src(coffeeFiles)
.pipe(coffee({bare:false}))
.pipe(gulp.dest(config.dist));
});
gulp.task('coffee:watch', () =>{
return gulp.watch(coffeeFiles, ['coffee']);
});
//clean
gulp.task('clean', ()=>{
return del(config.dist);
});
//watch
gulp.task('watch', ['pug:watch', 'sass:watch', 'coffee:watch', 'copy:watch']);
//task
gulp.task('develop', ['webserver', 'watch']);
gulp.task('default', ['develop']);
gulp.task('build', ()=>{
return runSequence(
'clean',
['pug', 'sass', 'coffee', 'copy']
);
});
Raw
gulpfile.js
var gulp = require('gulp'),
os = require('os'),
del = require('del'),
runSequence = require('run-sequence'),
webserver = require('gulp-webserver'),
pug = require('gulp-pug'),
sass = require('gulp-sass'),
coffee = require('gulp-coffee'),
slack = require('gulp-slack')({
url: '*Your Webhook URL*'
});
const config = {
src: 'src',
dist: 'public',
assets: 'assets',
};
// IPアドレスを取得
getIPAddress = ()=>{
var ifaces = os.networkInterfaces();
var ipaddress;
Object.keys(ifaces).forEach((ifname) =>{
ifaces[ifname].forEach((iface)=>{
if(iface.family !== 'IPv4' || iface.internal != false){
return;
}
ipaddress = iface.address;
});
});
return ipaddress;
};
var ipaddress = getIPAddress();
//Webサーバー
gulp.task('webserver', () => {
return gulp.src(config.dist)
.pipe(webserver({
livereload: true, //ライブリロード
host: '0.0.0.0' // IPアドレスで起動
}))
//slackにアドレスを通知。
.pipe(slack(`http://${ipaddress}:8000/`));
});
//コピー
gulp.task('copy', ()=>{
return gulp.src(`./${config.assets}/**`)
.pipe(gulp.dest(`./${config.dist}`))
});
gulp.task('copy:watch', ()=>{
gulp.watch(`${config.assets}/**`, ['copy']);
});
//pug
// _ アンダーバーから始まる、インクルードファイルをコンパイルしない
const watchPugFile = `${config.src}/**/*.pug`;
const pugFiles = [watchPugFile, `!./${config.src}/**/_*.pug`];
gulp.task('pug:dev', () => {
return gulp.src(pugFiles)
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(config.dist))
});
gulp.task('pug', () => {
return gulp.src(pugFiles)
.pipe(pug({
pretty: false
}))
.pipe(gulp.dest(`./${config.dist}/`))
});
gulp.task('pug:watch', () =>{
return gulp.watch(watchPugFile, ['pug:dev']);
});
//sass
const watchSassFile = `${config.src}/**/*.scss`;
const sassFiles = [watchSassFile, `!./${config.src}/**/_*.scss`];
gulp.task('sass', () => {
return gulp.src(sassFiles)
.pipe(sass.sync().on('errer', sass.logError))
.pipe(gulp.dest(config.dist))
});
gulp.task('sass:watch', () =>{
return gulp.watch(watchSassFile, ['sass']);
});
//coffee
const coffeeFiles = `${config.src}/**/*.coffee`;
gulp.task('coffee', () =>{
return gulp.src(coffeeFiles)
.pipe(coffee({bare:false}))
.pipe(gulp.dest(config.dist));
});
gulp.task('coffee:watch', () =>{
return gulp.watch(coffeeFiles, ['coffee']);
});
//clean
gulp.task('clean', ()=>{
return del(config.dist);
});
//watch
gulp.task('watch', ['pug:watch', 'sass:watch', 'coffee:watch', 'copy:watch']);
//task
gulp.task('develop', ['webserver', 'watch']);
gulp.task('default', ['develop']);
gulp.task('build', ()=>{
return runSequence(
'clean',
['pug', 'sass', 'coffee', 'copy']
);
});
Raw
package.js
{
"scripts": {
"gulp": "gulp",
"start": "gulp develop",
"build": "gulp build"
},
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-coffee": "^2.3.2",
"gulp-pug": "^3.1.0",
"gulp-sass": "^2.3.2",
"gulp-slack": "^0.1.2",
"gulp-webserver": "^0.9.1",
"run-sequence": "^1.2.2"
}
}
Raw
package.json
{
"scripts": {
"gulp": "gulp",
"start": "gulp develop",
"build": "gulp build"
},
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-coffee": "^2.3.2",
"gulp-pug": "^3.1.0",
"gulp-sass": "^2.3.2",
"gulp-slack": "^0.1.2",
"gulp-webserver": "^0.9.1",
"run-sequence": "^1.2.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment