maluramichael · August 29, 2015 14:14
diff --git a/gistfile1.js b/gistfile1.js
 /*/*****************************************************************************************/
 {
  "name": "cof",
  "version": "0.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.10",
    "gulp-coffee": "^2.2.0",
    "gulp-livereload": "^3.5.0",
    "gulp-minify-css": "^0.4.2",
    "gulp-sass": "^1.3.2",
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.2",
    "gulp-watch": "^4.1.0"
  },
  "dependencies": {
    "express": "^4.11.1"
  }
 }

 /*/*****************************************************************************************/
 express = require 'express'
 app = express()
 apiRouter = express.Router()

 app.use express.static(process.cwd() + '/client/')
 app.use '/api', apiRouter

 app.listen(9000)
 /*/*****************************************************************************************/
 <html>
 <head>
 	<link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
 	<div class="navigation">
 		<div class="item">1</div>
 		<div class="item">2</div>
 		<div class="item">3</div>
 		<div class="item">4</div>
 	</div>
 </body>
 </html>
 /*/*****************************************************************************************/
 @import 'reset';

 $baseColor: #EFEFEF;

 body {
    font-family: Helvetica;
    padding: 3em;
    color: black;
    font-weight: bold;
    background-color: $baseColor;
 }
 .divider {
    height: 1px;
 }
 .navigation {
 	.item {
 		float: left;
 		text-align: center;
 		border-top: 1px solid darken($baseColor, 10);
 		border-bottom: 1px solid darken($baseColor, 10);
 	}

 	.item:not(first-child) {
 		border-left: 1px solid darken($baseColor, 10);
 		margin-left: -1px;
 	}
 	.item:last-child {
 		border-right: 1px solid darken($baseColor, 30);
 		margin-right: -1px;	
 	}
    @for $i from 1 through 16 {
        .item:first-child:nth-last-child(#{$i}),
  		.item:first-child:nth-last-child(#{$i}) ~ .item {
            width: 100% / $i
        }
    }
 }
 /*/*****************************************************************************************/
 var gulp = require('gulp'),
    coffee = require('gulp-coffee'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    livereload = require('gulp-livereload'),
    gutil = require('gulp-util');

 var coffeeFiles = 'src/**/*.coffee',
    scssFiles = 'src/**/*.scss',
    htmlFiles = 'src/**/*.html';

 function swallowError(error) {
    console.log(error.toString());
    this.emit('end');
 }

 function compileCoffee() {
    console.log('compile coffee');
    return gulp.src(coffeeFiles)
        .pipe(coffee({
            bare: false
        }).on('error', swallowError))
        .pipe(gulp.dest('build/'));
 }

 function compileHtml() {
    console.log('compile html');
    return gulp.src(htmlFiles)
        .pipe(gulp.dest('build/'));
 }

 function compileSass() {
    console.log('compile sass');
    return gulp.src(scssFiles)
        .pipe(sass().on('error', swallowError))
        .pipe(minifyCSS({
            keepBreaks: true
        }))
        .pipe(gulp.dest('./build/'));
 }

 gulp.task('coffee', compileCoffee);
 gulp.task('sass', compileSass);
 gulp.task('html', compileHtml);

 gulp.task('watch', ['default'], function() {
    gulp.watch(scssFiles, ['sass']);
    gulp.watch(coffeeFiles, ['coffee']);
    gulp.watch(htmlFiles, ['html']);
    livereload.listen();
    gulp.watch(['build/**']).on('change', livereload.changed);
 });

 gulp.task('default', ['coffee', 'sass', 'html']);
	//****************************************************************************************/
	{
	"name": "cof",
	"version": "0.0.0",
	"description": "",
	"main": "main.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"gulp": "^3.8.10",
	"gulp-coffee": "^2.2.0",
	"gulp-livereload": "^3.5.0",
	"gulp-minify-css": "^0.4.2",
	"gulp-sass": "^1.3.2",
	"gulp-uglify": "^1.1.0",
	"gulp-util": "^3.0.2",
	"gulp-watch": "^4.1.0"
	},
	"dependencies": {
	"express": "^4.11.1"
	}
	}

	//****************************************************************************************/
	express = require 'express'
	app = express()
	apiRouter = express.Router()

	app.use express.static(process.cwd() + '/client/')
	app.use '/api', apiRouter

	app.listen(9000)
	//****************************************************************************************/
	<html>
	<head>
	<link rel="stylesheet" href="/css/style.css">
	</head>
	<body>
	<div class="navigation">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	</div>
	</body>
	</html>
	//****************************************************************************************/
	@import 'reset';

	$baseColor: #EFEFEF;

	body {
	font-family: Helvetica;
	padding: 3em;
	color: black;
	font-weight: bold;
	background-color: $baseColor;
	}
	.divider {
	height: 1px;
	}
	.navigation {
	.item {
	float: left;
	text-align: center;
	border-top: 1px solid darken($baseColor, 10);
	border-bottom: 1px solid darken($baseColor, 10);
	}

	.item:not(first-child) {
	border-left: 1px solid darken($baseColor, 10);
	margin-left: -1px;
	}
	.item:last-child {
	border-right: 1px solid darken($baseColor, 30);
	margin-right: -1px;
	}
	@for $i from 1 through 16 {
	.item:first-child:nth-last-child(#{$i}),
	.item:first-child:nth-last-child(#{$i}) ~ .item {
	width: 100% / $i
	}
	}
	}
	//****************************************************************************************/
	var gulp = require('gulp'),
	coffee = require('gulp-coffee'),
	sass = require('gulp-sass'),
	minifyCSS = require('gulp-minify-css'),
	uglify = require('gulp-uglify'),
	livereload = require('gulp-livereload'),
	gutil = require('gulp-util');

	var coffeeFiles = 'src/*/.coffee',
	scssFiles = 'src/*/.scss',
	htmlFiles = 'src/*/.html';

	function swallowError(error) {
	console.log(error.toString());
	this.emit('end');
	}

	function compileCoffee() {
	console.log('compile coffee');
	return gulp.src(coffeeFiles)
	.pipe(coffee({
	bare: false
	}).on('error', swallowError))
	.pipe(gulp.dest('build/'));
	}

	function compileHtml() {
	console.log('compile html');
	return gulp.src(htmlFiles)
	.pipe(gulp.dest('build/'));
	}

	function compileSass() {
	console.log('compile sass');
	return gulp.src(scssFiles)
	.pipe(sass().on('error', swallowError))
	.pipe(minifyCSS({
	keepBreaks: true
	}))
	.pipe(gulp.dest('./build/'));
	}

	gulp.task('coffee', compileCoffee);
	gulp.task('sass', compileSass);
	gulp.task('html', compileHtml);

	gulp.task('watch', ['default'], function() {
	gulp.watch(scssFiles, ['sass']);
	gulp.watch(coffeeFiles, ['coffee']);
	gulp.watch(htmlFiles, ['html']);
	livereload.listen();
	gulp.watch(['build/**']).on('change', livereload.changed);
	});

	gulp.task('default', ['coffee', 'sass', 'html']);