Skip to content

Commit 07649ad

Browse files
committed
initial commit
0 parents  commit 07649ad

13 files changed

+357
-0
lines changed

.babelrc

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
presets: [
3+
'es2015',
4+
'stage-0',
5+
'react'
6+
],
7+
"env": {
8+
"development": {
9+
"plugins": [
10+
["react-transform", {
11+
"transforms": [{
12+
"transform": "react-transform-hmr",
13+
"imports": ["react"],
14+
"locals": ["module"]
15+
}]
16+
}]
17+
]
18+
}
19+
}
20+
}

.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
end_of_line = lf
7+
indent_size = 2
8+
indent_style = space
9+
max_line_length = 80
10+
trim_trailing_whitespace = true
11+
12+
[COMMIT_EDITMSG]
13+
max_line_length = 0

.eslintrc.json

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{
2+
"rules": {
3+
"block-scoped-var": 1,
4+
"brace-style": [1, "1tbs"],
5+
"camelcase": [1, {"properties": "always"}],
6+
"comma-dangle": 1,
7+
"comma-spacing": [1, {"before": false, "after": true}],
8+
"comma-style": [1, "last"],
9+
"curly": [2],
10+
"eol-last": 0,
11+
"generator-star-spacing": [1, "after"],
12+
"guard-for-in": 1,
13+
"indent": [1, 2],
14+
"no-console": 0,
15+
"no-eq-null": 2,
16+
"no-extra-parens": 0,
17+
"no-lonely-if": 1,
18+
"no-mixed-spaces-and-tabs": [1, "smart-tabs"],
19+
"no-spaced-func": 1,
20+
"no-throw-literal": 2,
21+
"no-trailing-spaces": 0,
22+
"no-underscore-dangle": 0,
23+
"no-undefined": 2,
24+
"no-unused-vars": 1,
25+
"no-var": 1,
26+
"quotes": [0, "double", "avoid-escape"],
27+
"radix": 1,
28+
"semi-spacing": [1, {"before": false, "after": true}],
29+
"vars-on-top": 1,
30+
"wrap-iife": 1,
31+
"react/display-name": 0,
32+
"react/jsx-boolean-value": 1,
33+
"jsx-quotes": 1,
34+
"react/jsx-no-undef": 1,
35+
"react/jsx-sort-props": 1,
36+
"react/jsx-sort-prop-types": 1,
37+
"react/jsx-uses-react": 1,
38+
"react/jsx-uses-vars": 1,
39+
"react/no-did-mount-set-state": 1,
40+
"react/no-did-update-set-state": 1,
41+
"react/no-multi-comp": 1,
42+
"react/no-unknown-property": 1,
43+
"react/prop-types": 1,
44+
"react/react-in-jsx-scope": 1,
45+
"react/self-closing-comp": 1,
46+
"react/sort-comp": 1,
47+
"react/wrap-multilines": 1
48+
},
49+
"env": {
50+
"es6": true,
51+
"browser": true,
52+
"node": true,
53+
"mocha": true
54+
},
55+
"extends": "eslint:recommended",
56+
"ecmaFeatures": {
57+
"arrowFunctions": true,
58+
"blockBindings": true,
59+
"classes": true,
60+
"defaultParams": true,
61+
"experimentalObjectRestSpread": true,
62+
"forOf": true,
63+
"generators": true,
64+
"jsx": true,
65+
"modules": true,
66+
"spread": true,
67+
"superInFunctions": true,
68+
"templateStrings": true
69+
},
70+
"plugins": [
71+
"react"
72+
]
73+
}

.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Machine
2+
.DS_Store
3+
4+
# Logs
5+
logs
6+
*.log
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
13+
# Dependency directory
14+
/node_modules
15+
16+
# Users Environment Variables
17+
*.iml
18+
.lock-wscript
19+
.project
20+
/.idea
21+
/data
22+
/dist

README.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
Front-End Tooling Kit
2+
=====================
3+
4+
A framework-agnostic tooling kit for front-end development task management.
5+
6+
What this kit does do:
7+
8+
* Manage tasks via Gulp and Webpack for development and production
9+
* Transpiles ES6, JSX, and dependency management, and bundles via Webpack.
10+
* Compiles SASS into CSS
11+
* Provides support for sourcemaps
12+
* Compresses images for production
13+
* Enforces code quality via ESLint and an .editorconfig file
14+
* Provides a configurable source and distribution folder structure
15+
16+
### To install
17+
18+
```
19+
npm install
20+
```
21+
22+
### During development
23+
24+
```
25+
gulp watch
26+
```
27+
28+
### For production
29+
30+
```
31+
gulp build
32+
```
33+
34+
### TODO's
35+
36+
* Add a starter testing suite
37+
* Provide instructions for how to use as submodule in other projects

app/images/favicon.ico

24.3 KB
Binary file not shown.

app/sass/main.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@charset "utf-8";
2+
3+
//@import "_file.scss";

app/scripts/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('Hello, World!');

gulpfile.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
'use strict';
2+
3+
var gulp = require('gulp');
4+
var gutil = require('gulp-util');
5+
var sourcemaps = require('gulp-sourcemaps');
6+
var sass = require('gulp-sass');
7+
var webpack = require('webpack');
8+
var imagemin = require('gulp-imagemin');
9+
var del = require('del');
10+
var runSequence = require('run-sequence');
11+
12+
var webpackDevConfig = require('./webpack.dev.js');
13+
var webpackProdConfig = require('./webpack.prod.js');
14+
15+
var APP_SRC = './app';
16+
var APP_DIST = './dist';
17+
var SASS_SRC = APP_SRC + '/sass/**/*.scss';
18+
var SASS_DIST = APP_DIST + '/css';
19+
var SCRIPTS_SRC = APP_SRC + '/scripts/**/*.+(js|jsx)';
20+
var IMG_SRC = APP_SRC + '/images/**/*.+(png|jpg|gif|svg|ico)';
21+
var IMG_DIST = APP_DIST + '/images';
22+
var FONTS_SRC = APP_SRC + '/fonts/**/*';
23+
var FONTS_DIST = APP_DIST + '/fonts';
24+
25+
gulp.task('sass:dev', function () {
26+
var sassOptions = {
27+
outputStyle: 'expanded',
28+
sourceComments: true
29+
};
30+
gulp.src(SASS_SRC)
31+
.pipe(sourcemaps.init())
32+
.pipe(sass(sassOptions))
33+
.pipe(sass().on('error', sass.logError))
34+
.pipe(sourcemaps.write('./'))
35+
.pipe(gulp.dest(SASS_DIST));
36+
});
37+
38+
gulp.task('sass:prod', function () {
39+
var sassOptions = {
40+
outputStyle: 'compressed'
41+
};
42+
gulp.src(SASS_SRC)
43+
.pipe(sass(sassOptions))
44+
.pipe(sass().on('error', sass.logError))
45+
.pipe(gulp.dest(SASS_DIST));
46+
});
47+
48+
function doWebpack(config, callback) {
49+
webpack(config, function (err, stats) {
50+
if (err) throw new gutil.PluginError("webpack", err);
51+
gutil.log("[webpack]", stats.toString({
52+
// output options
53+
}));
54+
callback();
55+
});
56+
}
57+
58+
gulp.task('webpack:dev', function (callback) {
59+
doWebpack(Object.create(webpackDevConfig), callback);
60+
});
61+
62+
gulp.task('webpack:prod', function (callback) {
63+
doWebpack(Object.create(webpackProdConfig), callback);
64+
});
65+
66+
gulp.task('images:dev', function(){
67+
return gulp.src(IMG_SRC)
68+
.pipe(gulp.dest(IMG_DIST))
69+
});
70+
71+
gulp.task('images:prod', function(){
72+
return gulp.src(IMG_SRC)
73+
.pipe(imagemin())
74+
.pipe(gulp.dest(IMG_DIST))
75+
});
76+
77+
gulp.task('fonts', function() {
78+
return gulp.src(FONTS_SRC)
79+
.pipe(gulp.dest(FONTS_DIST))
80+
});
81+
82+
gulp.task('clean', function(callback) {
83+
return del(APP_DIST, callback);
84+
});
85+
86+
gulp.task('build', function(callback){
87+
runSequence('clean', ['sass:prod', 'webpack:prod', 'images:prod', 'fonts'], callback);
88+
});
89+
90+
gulp.task('watch', ['sass:dev', 'webpack:dev', 'images:dev', 'fonts'], function () {
91+
gulp.watch(SASS_SRC, ['sass:dev']);
92+
gulp.watch([SCRIPTS_SRC], ['webpack:dev']);
93+
gulp.watch(IMG_SRC, ['images:dev']);
94+
gulp.watch(FONTS_SRC, ['fonts']);
95+
});

package.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "front-end-tooling-kit",
3+
"version": "0.0.0",
4+
"private": true,
5+
"description": "",
6+
"scripts": {
7+
"build": "gulp build",
8+
"watch": "gulp watch"
9+
},
10+
"devDependencies": {
11+
"babel-cli": "^6.3.17",
12+
"babel-core": "^6.3.17",
13+
"babel-loader": "^6.2.0",
14+
"babel-plugin-react-transform": "^2.0.0-beta1",
15+
"babel-preset-es2015": "^6.3.13",
16+
"babel-preset-react": "^6.3.13",
17+
"babel-preset-stage-0": "^6.3.13",
18+
"del": "^2.2.0",
19+
"eslint": "^1.8.0",
20+
"eslint-loader": "^1.2.0",
21+
"eslint-plugin-react": "^3.7.1",
22+
"gulp": "^3.9.0",
23+
"gulp-imagemin": "^2.4.0",
24+
"gulp-sass": "^2.1.0",
25+
"gulp-sourcemaps": "^1.6.0",
26+
"gulp-util": "^3.0.7",
27+
"run-sequence": "^1.1.5",
28+
"webpack": "^1.12.2",
29+
"webpack-config-merger": "0.0.3"
30+
}
31+
}

webpack.base.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict';
2+
3+
module.exports = {
4+
entry: './app/scripts/app.js',
5+
eslint: {
6+
configFile: '.eslintrc.json',
7+
failOnWarning: true,
8+
failOnError: true
9+
},
10+
output: {
11+
path: './dist/js/',
12+
filename: 'bundle.js'
13+
},
14+
module: {
15+
preLoaders: [
16+
{
17+
test: /\.(js|jsx)$/,
18+
exclude: /node_modules/,
19+
loader: 'eslint'
20+
}
21+
],
22+
loaders: [
23+
{
24+
test: /\.(js|jsx)$/,
25+
exclude: /node_modules/,
26+
loader: ['babel'],
27+
query: {
28+
presets: ['react', 'es2015']
29+
}
30+
}
31+
]
32+
},
33+
resolve: {
34+
// add shortcut as alias
35+
alias: {
36+
'@scripts': './app/scripts'
37+
},
38+
// extensions listed here can be omitted in `import`s
39+
extensions: ['', '.js', '.jsx']
40+
}
41+
};

webpack.dev.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
'use strict';
2+
3+
let webpack = require('webpack');
4+
let mergeWebpackConfig = require('webpack-config-merger');
5+
let webpackBaseConfig = require('./webpack.base.js');
6+
7+
module.exports = mergeWebpackConfig(webpackBaseConfig, {
8+
devtool: 'cheap-module-eval-source-map'
9+
});

webpack.prod.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use strict';
2+
3+
let webpack = require('webpack');
4+
let mergeWebpackConfig = require('webpack-config-merger');
5+
let webpackBaseConfig = require('./webpack.base.js');
6+
7+
module.exports = mergeWebpackConfig(webpackBaseConfig, {
8+
//devtool: 'source-map',
9+
plugins: [
10+
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }})
11+
]
12+
});

0 commit comments

Comments
 (0)