jinmayamashita
9/30/2015 - 11:27 AM
Gulpfile for a HTML5, Sass & JavaScript playground with base html5 skeleton template
Gulpfile for a HTML5, Sass & JavaScript playground with base html5 skeleton template
{
"name": "gulpfile-for-sass-playground",
"version": "1.0.1",
"description": "Gulpfile for Sass playground",
"main": "gulpfile.js",
"scripts": {
"test": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://gist.github.com/cd59c8704421c7708491.git"
},
"author": "Jinma Yamashita <jinmayamashita@gmail.com>",
"license": "UNLICENSED",
"bugs": {
"url": "https://gist.github.com/cd59c8704421c7708491.git"
},
"homepage": "http://jinmayamashita.github.io/",
"devDependencies": {
"gulp": "*",
"gulp-pleeease": "*",
"gulp-plumber": "*",
"gulp-sass": "*",
"gulp-concat": "*",
"gulp-notify": "*",
"browser-sync": "*"
}
}
// Variables
//————————————————————————————————————————————————————————————————————————————
// colors
$red: #b00d3b
$blue: #0099cc
$green: #26a5a2
$white: #eeeeee
$black: #32393c
// colors / variations
$body-bg-color: $white
$body-tx-color: $black
// sizes
$base-font-size: 16px
// Mixins
//————————————————————————————————————————————————————————————————————————————
// sample mixin
@mixin random-color()
$red: random(256)-1
$green: random(256)-1
$blue: random(256)-1
$alpha: random(100)/100
color: rgba($red, $green, $blue, $alpha)
// Base settings
//————————————————————————————————————————————————————————————————————————————
body
font-size: $base-font-size
color: $body-tx-color
background-color: $body-bg-color
height: 100vh
border: 10px solid darken($body-bg-color, 10%)
.container
padding: 2rem
header
margin-bottom: 4rem
// Code here...
//————————————————————————————————————————————————————————————————————————————
main
@include random-color()<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="application-name" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>New experiments</title>
<style type="text/css">
/* Normalize.css | https://necolas.github.io/normalize.css/ */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>New experiments</h1>
</header>
<main>
<section>
<h1>It Works!</h1>
<!-- <button id="" class="" name="">button</button> -->
<!-- <input id="" class="" type="text" /> -->
</section>
</main>
<footer>
</footer>
</div>
</body>
</html>/* modules
*————————————————————————————————————————————————————————————————————————————*/
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var prefix = require('gulp-pleeease');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();
/* file path
*————————————————————————————————————————————————————————————————————————————*/
var dirs = {
sass: { src: './**/*.sass', dest: './' }
};
/* Error handler
*————————————————————————————————————————————————————————————————————————————*/
var onError = function(err) {
notify.onError({
title: 'Error',
message: 'Error: <%= error.message %>'}
)(err); // Error Notification
console.log(err.toString()); // Error to console
this.emit('end');
}
/* Sass Tasks
*————————————————————————————————————————————————————————————————————————————*/
gulp.task('sass', function () {
return gulp.src(dirs.sass.src)
.pipe(plumber({ errorHandler: onError }))
.pipe(sass({
errLogToConsole: true,
outputStyle: 'expanded',
noCache: true
}))
.pipe(prefix({ 'minifier' : false }))
.pipe(concat('style.css'))
.pipe(gulp.dest(dirs.sass.dest))
.pipe(browserSync.stream());
});
/* Server
* http://www.browsersync.io/docs/options/
*————————————————————————————————————————————————————————————————————————————*/
gulp.task('server', ['sass'], function() {
browserSync.init({
browser: 'google chromium',
logLevel: 'debug',
scrollProportionally: false,
port: 5000, // Browsersync server through a random Public URL
// tunnel: true,
injectChanges: true, // Inject CSS changes
reloadOnRestart: true,
server: {
baseDir: "./"
}
});
// watch files
gulp.watch(dirs.sass.src, ['sass']);
gulp.watch('./index.html').on('change', browserSync.reload);
});
// create a default task and just watch
gulp.task('default', ['server']);ಠ_ಠ Gulpfile for Sass playground
ಠ_ಠ... Gulpfile for a HTML5, Sass & JavaScript playground. So, just copy and paste the codes into your project folder.
Usage
Clone this gist to get started
git clone https://gist.github.com/cd59c8704421c7708491.git new_experiments && cd new_experiments && rm -rf .git
Install a node module in the your project
npm install
Browsersync can watch your files as you work.
gulp