Skip to content
Permalink
Browse files

initial commit

  • Loading branch information...
Eric Motil Eric Motil
Eric Motil authored and Eric Motil committed Nov 4, 2015
0 parents commit 15d3da3b36f444277012073c07cff88499864284
Showing with 401 additions and 0 deletions.
  1. +11 −0 .editorconfig
  2. +8 −0 .gitignore
  3. +150 −0 Gulpfile.js
  4. +38 −0 README.md
  5. BIN img/favicons/android-chrome-144x144.png
  6. BIN img/favicons/android-chrome-192x192.png
  7. BIN img/favicons/android-chrome-36x36.png
  8. BIN img/favicons/android-chrome-48x48.png
  9. BIN img/favicons/android-chrome-72x72.png
  10. BIN img/favicons/android-chrome-96x96.png
  11. BIN img/favicons/apple-touch-icon-114x114.png
  12. BIN img/favicons/apple-touch-icon-120x120.png
  13. BIN img/favicons/apple-touch-icon-144x144.png
  14. BIN img/favicons/apple-touch-icon-152x152.png
  15. BIN img/favicons/apple-touch-icon-180x180.png
  16. BIN img/favicons/apple-touch-icon-57x57.png
  17. BIN img/favicons/apple-touch-icon-60x60.png
  18. BIN img/favicons/apple-touch-icon-72x72.png
  19. BIN img/favicons/apple-touch-icon-76x76.png
  20. BIN img/favicons/apple-touch-icon-precomposed.png
  21. BIN img/favicons/apple-touch-icon.png
  22. +12 −0 img/favicons/browserconfig.xml
  23. BIN img/favicons/favicon-16x16.png
  24. BIN img/favicons/favicon-32x32.png
  25. BIN img/favicons/favicon-96x96.png
  26. BIN img/favicons/favicon.ico
  27. +41 −0 img/favicons/manifest.json
  28. BIN img/favicons/mstile-144x144.png
  29. BIN img/favicons/mstile-150x150.png
  30. BIN img/favicons/mstile-310x150.png
  31. BIN img/favicons/mstile-310x310.png
  32. BIN img/favicons/mstile-70x70.png
  33. +22 −0 img/favicons/safari-pinned-tab.svg
  34. BIN img/friday.gif
  35. +5 −0 js/main.js
  36. +29 −0 package.json
  37. +8 −0 pages/index.html
  38. +7 −0 scss/_base.scss
  39. +4 −0 scss/main.scss
  40. +13 −0 templates/default.html
  41. +2 −0 templates/partials/end.html
  42. +51 −0 templates/partials/head.html
@@ -0,0 +1,11 @@
# editorconfig.org

root = true

[*]
indent_style = tab
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
@@ -0,0 +1,8 @@
# Dependency directories
node_modules
bower_components

# Compiled
dist
dist/**/*

@@ -0,0 +1,150 @@
'use strict';


// -----------------------------------------------------------------------------
// Dependencies
// -----------------------------------------------------------------------------

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sassdoc = require('sassdoc');
var browserSync = require('browser-sync').create();
var nunjucksRender = require('gulp-nunjucks-render');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var siteOutput = './dist';


// -----------------------------------------------------------------------------
// Configuration
// -----------------------------------------------------------------------------

var input = './scss/*.scss';
var inputMain = './scss/main.scss';
var output = siteOutput + '/css';
var inputTemplates = './pages/*.html';
var sassOptions = { outputStyle: 'expanded' };
var autoprefixerOptions = { browsers: ['last 2 versions', '> 5%', 'Firefox ESR'] };
var sassdocOptions = { dest: siteOutput + '/sassdoc' };


// -----------------------------------------------------------------------------
// Sass compilation
// -----------------------------------------------------------------------------

gulp.task('sass', function() {
return gulp
.src(inputMain)
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(gulp.dest(output))
.pipe(browserSync.stream());
});


// -----------------------------------------------------------------------------
// Javascript
// -----------------------------------------------------------------------------

gulp.task('scripts', function() {
return gulp.src([
'./bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
'js/main.js'
])
.pipe(concat({ path: 'main.js'}))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest(siteOutput + '/js'));
});


// -----------------------------------------------------------------------------
// Templating
// -----------------------------------------------------------------------------

gulp.task('nunjucks', function() {
nunjucksRender.nunjucks.configure(['./templates/']);
// Gets .html and .nunjucks files in pages
return gulp.src(inputTemplates)
// Renders template with nunjucks
.pipe(nunjucksRender())
// output files in dist folder
.pipe(gulp.dest(siteOutput))
});


// -----------------------------------------------------------------------------
// Imagemin
// -----------------------------------------------------------------------------

gulp.task('img', function() {
return gulp.src('./img/**/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(siteOutput + '/img'));
});


// -----------------------------------------------------------------------------
// Fonts
// -----------------------------------------------------------------------------

// gulp.task('fonts', function() {
// return gulp.src(['./fonts/*'])
// .pipe(gulp.dest(siteOutput + '/fonts/'));
// });


// -----------------------------------------------------------------------------
// Sass documentation generation
// -----------------------------------------------------------------------------

gulp.task('sassdoc', function() {
return gulp
.src(input)
.pipe(sassdoc(sassdocOptions))
.resume();
});


// -----------------------------------------------------------------------------
// Watchers
// -----------------------------------------------------------------------------

gulp.task('watch', function() {
// Watch the sass input folder for change,
// and run `sass` task when something happens
gulp.watch(input, ['sass']).on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp.watch('./js/*', ['scripts']).on('change', browserSync.reload);

// Watch nunjuck templates and reload browser if change
gulp.watch(inputTemplates, ['nunjucks']).on('change', browserSync.reload);

});


// -----------------------------------------------------------------------------
// Static server
// -----------------------------------------------------------------------------

gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: siteOutput
}
});
});


// -----------------------------------------------------------------------------
// Default task
// -----------------------------------------------------------------------------

gulp.task('default', ['sass', 'nunjucks', 'scripts', 'img', 'watch', 'browser-sync']);
@@ -0,0 +1,38 @@
# SVMIC

A nice little Gulp project using [Nunjucks](http://mozilla.github.io/nunjucks/),[SASS](http://sass-lang.com/) and [Gulp](http://gulpjs.com/). Browsersync runs out of 'dist' folder and watches all Nunjucks templates, SASS and JS and live reloads in browser on change. Also worked in some img min and moving fonts and assets to a 'dist' folder for easy deployment.


Gulp tasks used:
- sass
- autoprefixer
- sassdoc
- browserSync
- nunjucksRender
- script concat
- imagemin
- pngquant


## Setup

1) Install [Gulp](http://gulpjs.com/) and [NPM]('http://nodejs.org') if you do not already have them.

2) Install npm dependencies
```
npm install
```

3) Install bower components
```
bower install
```

$) Run Gulp
```
gulp
```

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,41 @@
{
"name": "svmic",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="289.000000pt" height="289.000000pt" viewBox="0 0 289.000000 289.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,289.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1365 2868 c-38 -13 -301 -211 -391 -293 -6 -5 -44 -39 -85 -75 -92
-80 -393 -381 -476 -475 -34 -38 -74 -83 -88 -100 -63 -71 -248 -311 -273
-353 -23 -40 -27 -58 -26 -122 0 -89 10 -108 125 -255 323 -414 681 -769 1078
-1069 116 -88 166 -108 248 -101 61 5 90 20 208 109 281 212 623 535 860 811
33 38 71 82 84 97 55 63 194 246 219 288 23 39 27 56 27 125 -1 75 -3 84 -36
135 -31 47 -139 188 -196 256 -10 11 -40 47 -68 80 -195 232 -545 570 -795
768 -47 37 -93 74 -103 83 -53 41 -116 81 -146 92 -41 13 -125 13 -166 -1z
m284 -1222 l194 -194 -196 -196 -196 -197 -197 197 -197 196 194 194 c107 107
196 194 199 194 3 0 92 -87 199 -194z"/>
</g>
</svg>
BIN +1.83 MB img/friday.gif
Diff not rendered.
@@ -0,0 +1,5 @@
// main.js

$(document).ready(function (){
console.log('document is ready bitch');
});
@@ -0,0 +1,29 @@
{
"name": "svmic",
"version": "1.0.0",
"description": "svmic",
"main": "index.html",
"scripts": {
"test": "ok"
},
"repository": {
"type": "git",
"url": "nope"
},
"keywords": [
"insurance"
],
"author": "eric motil",
"license": "MIT",
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.6.0",
"gulp-imagemin": "^2.3.0",
"gulp-nunjucks-render": "^1.0.0",
"gulp-sass": "^2.1.0",
"imagemin-pngquant": "^4.2.0",
"sassdoc": "^2.1.15"
}
}
@@ -0,0 +1,8 @@
<!-- index.nunjucks -->
{% extends "default.html" %}
{% block content %}

<h1>Hello</h1>
<img src="/img/friday.gif" width="100%"/>

{% endblock %}
@@ -0,0 +1,7 @@
// base.scss

html, body {
height: 100%;
margin: 0;
padding: 0;
}
@@ -0,0 +1,4 @@
// main.scss

// Imports
@import 'base';
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">

{% include "partials/head.html" %}

<body>

{% block content %}{% endblock %}

{% include "partials/end.html" %}

</body>
</html>
@@ -0,0 +1,2 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/main.js"></script>

0 comments on commit 15d3da3

Please sign in to comment.
You can’t perform that action at this time.