├── .babelrc
├── .bowerrc
├── .gitignore
├── README.md
├── bower.json
├── dist
    ├── css
    │   └── main.css
    ├── img
    │   └── front-end-kids.png
    └── js
    │   ├── bundle.js
    │   └── bundle.js.map
├── gulpfile.babel.js
├── index.html
├── package.json
├── src
    ├── images
    │   └── front-end-kids.png
    ├── index.html
    ├── scripts
    │   └── main.js
    └── styles
    │   └── main.scss
└── templates
    └── about.html


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015"]
3 | }


--------------------------------------------------------------------------------
/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "dist/bower_components/",
3 |   "timeout": 120000,
4 |   "registry": {
5 |     "search": [
6 |       "https://bower.herokuapp.com"
7 |     ]
8 |   }
9 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | bower_components/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frontend Starter Kit
 2 | Just a light-weight front-end development boilerplate. (NodeJS/NPM/ES6/Bower/Gulp/Sass/Babel/Babelify/Browserify) 
 3 | 
 4 | ## Usage
 5 | 
 6 | ```
 7 | $ git clone https://github.com/kdchang/frontend-starter-kit
 8 | ```
 9 | 
10 | ```
11 | $ cd frontend-starter-kit
12 | ```
13 | 
14 | ```
15 | $ npm install && bower install
16 | ```
17 | 
18 | ```
19 | $ npm start
20 | ```
21 | 
22 | Check the browser `localhost:7777`
23 | 
24 | ## Documents
25 | 1. [一看就懂的前端開發環境建置入門教學](http://blog.kdchang.cc/2016/11/05/how-to-establish-modern-front-end-development-environment-tutorial/)
26 | 
27 | ## License
28 | MIT
29 | 
30 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-starter-kit",
 3 |   "description": "",
 4 |   "main": "index.js",
 5 |   "authors": [
 6 |     "kdchang"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/kdchang/frontend-starter-kit",
10 |   "moduleType": [],
11 |   "ignore": [
12 |     "**/.*",
13 |     "node_modules",
14 |     "bower_components",
15 |     "test",
16 |     "tests"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/dist/css/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 |   color: red; }
3 | 


--------------------------------------------------------------------------------
/dist/img/front-end-kids.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/frontend-starter-kit/8beb238b3a2391720c09719d8e83e4c124a5d565/dist/img/front-end-kids.png


--------------------------------------------------------------------------------
/dist/js/bundle.js:
--------------------------------------------------------------------------------
1 | !function r(e,t,n){function o(u,f){if(!t[u]){if(!e[u]){var c="function"==typeof require&&require;if(!f&&c)return c(u,!0);if(i)return i(u,!0);var a=new Error("Cannot find module '"+u+"'");throw a.code="MODULE_NOT_FOUND",a}var l=t[u]={exports:{}};e[u][0].call(l.exports,function(r){var t=e[u][1][r];return o(t?t:r)},l,l.exports,r,e,t,n)}return t[u].exports}for(var i="function"==typeof require&&require,u=0;u<n.length;u++)o(n[u]);return o}({1:[function(r,e,t){"use strict";console.log("hello front end starter kit!!")},{}]},{},[1]);
2 | //# sourceMappingURL=bundle.js.map
3 | 


--------------------------------------------------------------------------------
/dist/js/bundle.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["bundle.js"],"names":["e","t","n","r","s","o","u","a","require","i","f","Error","code","l","exports","call","length","1","module","console","log"],"mappings":"CAAA,QAAUA,GAAEC,EAAEC,EAAEC,GAAG,QAASC,GAAEC,EAAEC,GAAG,IAAIJ,EAAEG,GAAG,CAAC,IAAIJ,EAAEI,GAAG,CAAC,GAAIE,GAAkB,kBAATC,UAAqBA,OAAQ,KAAIF,GAAGC,EAAE,MAAOA,GAAEF,GAAE,EAAI,IAAGI,EAAE,MAAOA,GAAEJ,GAAE,EAAI,IAAIK,GAAE,GAAIC,OAAM,uBAAuBN,EAAE,IAAK,MAAMK,GAAEE,KAAK,mBAAmBF,EAAE,GAAIG,GAAEX,EAAEG,IAAIS,WAAYb,GAAEI,GAAG,GAAGU,KAAKF,EAAEC,QAAQ,SAASd,GAAG,GAAIE,GAAED,EAAEI,GAAG,GAAGL,EAAG,OAAOI,GAAEF,EAAEA,EAAEF,IAAIa,EAAEA,EAAEC,QAAQd,EAAEC,EAAEC,EAAEC,GAAG,MAAOD,GAAEG,GAAGS,QAAkD,IAAI,GAA1CL,GAAkB,kBAATD,UAAqBA,QAAgBH,EAAE,EAAEA,EAAEF,EAAEa,OAAOX,IAAID,EAAED,EAAEE,GAAI,OAAOD,KAAKa,GAAG,SAAST,EAAQU,EAAOJ,GACvd,YAEAK,SAAQC,IAAI,2CAED","file":"bundle.js","sourcesContent":["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n'use strict';\n\nconsole.log('hello front end starter kit!!');\n\n},{}]},{},[1]);\n"]}


--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
 1 | import gulp from 'gulp';
 2 | import sass from 'gulp-sass';
 3 | import uglify from 'gulp-uglify';
 4 | import connect from 'gulp-connect';
 5 | import browserify from 'browserify';
 6 | import babelify from 'babelify';
 7 | // 轉成 gulp 讀取的 vinyl（黑膠）流
 8 | import source from 'vinyl-source-stream';
 9 | import buffer from 'vinyl-buffer';
10 | import sourcemaps from 'gulp-sourcemaps';
11 | import gutil from 'gulp-util';
12 | import image from 'gulp-image';
13 | 
14 | const dirs = {
15 |   src: 'src',
16 |   dest: 'dist'
17 | };
18 | 
19 | const stylesPaths = {
20 |   src: `${dirs.src}/styles/*.scss`,
21 |   dest: `${dirs.dest}/css`
22 | };
23 | 
24 | const scriptsPaths = {
25 |   src: `${dirs.src}/scripts/*.js`,
26 |   dest: `${dirs.dest}/js`
27 | };
28 | 
29 | const imagesPaths = {
30 |   src: `${dirs.src}/images/*`,
31 |   dest: `${dirs.dest}/img`
32 | };
33 | 
34 | gulp.task('styles', () => {
35 |   gulp.src(stylesPaths.src)
36 |     .pipe(sass())         // 編譯 Scss
37 |     .pipe(gulp.dest(stylesPaths.dest))  //
38 |     .pipe(connect.reload());
39 | });
40 | 
41 | gulp.task('scripts', function(){
42 |     return browserify({
43 |         entries: ['./src/scripts/main.js']
44 |     })
45 |     .transform(babelify)
46 |     .bundle()
47 |     .pipe(source('bundle.js'))
48 |     .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
49 |     .pipe(sourcemaps.init({loadMaps: true}))
50 |         .pipe(uglify())
51 |         .on('error', gutil.log)
52 |     .pipe(sourcemaps.write('./'))
53 |     .pipe(gulp.dest(scriptsPaths.dest))
54 |     .pipe(connect.reload());
55 | });
56 | 
57 | gulp.task('images', function() {
58 |   gulp.src(imagesPaths.src)
59 |     .pipe(image())
60 |     .pipe(gulp.dest(imagesPaths.dest))
61 |     .pipe(connect.reload());
62 | });
63 | 
64 | gulp.task('server', function () {
65 |   connect.server({
66 |     root: ['./'],
67 |     livereload: true,
68 |     port: 7777,
69 |   });
70 | });
71 | 
72 | gulp.task('watch', function () {
73 |   gulp.watch(stylesPaths.src, ['styles']);
74 |   gulp.watch(scriptsPaths.src, ['scripts']);
75 |   gulp.watch(imagesPaths.src, ['images']);
76 | });
77 | 
78 | gulp.task('default', ['scripts', 'styles', 'images', 'server', 'watch']);
79 | gulp.task('build', ['scripts', 'styles', 'images']);
80 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>My Front End Starter Kit</title>
 6 | 	<link rel="stylesheet" type="text/css" href="./dist/bower_components/bootstrap/dist/css/bootstrap.css">
 7 | 	<link rel="stylesheet" type="text/css" href="./dist/css/main.css">
 8 | </head>
 9 | <body>
10 | 	<h1>My Front End Starter Kit</h1>
11 | 	<img src="./dist/img/front-end-kids.png">
12 | 	<script type="text/javascript" src="./dist/js/bundle.js"></script>
13 | 	<a href="./templates/about.html">About</a>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-starter-kit",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "gulp",
 8 |     "build": "gulp build"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/kdchang/frontend-starter-kit.git"
13 |   },
14 |   "author": "kdchang",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/kdchang/frontend-starter-kit/issues"
18 |   },
19 |   "homepage": "https://github.com/kdchang/frontend-starter-kit#readme",
20 |   "devDependencies": {
21 |     "babel-core": "^6.18.2",
22 |     "babel-preset-es2015": "^6.18.0",
23 |     "babel-register": "^6.18.0",
24 |     "babelify": "^7.3.0",
25 |     "browserify": "^13.1.1",
26 |     "gulp": "^3.9.1",
27 |     "gulp-connect": "^5.0.0",
28 |     "gulp-image": "^2.7.2",
29 |     "gulp-sass": "^2.3.2",
30 |     "gulp-sourcemaps": "^2.2.0",
31 |     "gulp-uglify": "^2.0.0",
32 |     "gulp-util": "^3.0.7",
33 |     "vinyl-buffer": "^1.0.0",
34 |     "vinyl-source-stream": "^1.1.0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/images/front-end-kids.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kdchang/frontend-starter-kit/8beb238b3a2391720c09719d8e83e4c124a5d565/src/images/front-end-kids.png


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>My Front End Starter Kit</title>
 6 | 	<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap/dist/css/bootstrap.css">
 7 | 	<link rel="stylesheet" type="text/css" href="./css/main.css">
 8 | </head>
 9 | <body>
10 | 	<h1>My Front End Starter Kit</h1>
11 | 	<img src="./img/front-end-kids.png">
12 | 	<script type="text/javascript" src="./js/bundle.js"></script>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/src/scripts/main.js:
--------------------------------------------------------------------------------
1 | console.log('hello front end starter kit!!');


--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | h1 {
2 | 	color: red;
3 | }


--------------------------------------------------------------------------------
/templates/about.html:
--------------------------------------------------------------------------------
1 | <h1>About</h1>


--------------------------------------------------------------------------------