├── .gitignore
├── css
└── index.css
├── src
└── app.js
├── index.html
├── README.md
├── LICENSE
├── package.json
├── bin
└── server.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 |
--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
1 | /* Custom css goes here */
2 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | /*
2 | Your es2015 javascript goes here
3 | */
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Tachyons Webpack
12 |
13 |
14 |
15 |
16 | Tachyons
17 |
18 | Welcome to the Tachyons webpack boilerplate!
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tachyons webpack boilerplate with browser-sync
2 |
3 | This is a basic webpack boilerplate to be used with Tachyons. You can write your javascript in `src/app.js`m add html to `index.html` and
4 | add custom css to `css/index.css`.
5 |
6 | ## Installation
7 |
8 | git clone git@github.com:tachyons-css/tachyons-webpack.git
9 | cd tachyons-webpack
10 | npm install
11 |
12 | ## Development mode
13 |
14 | Running `npm run dev` will run the __webpack-dev-server__ on port 3000. You can then develop and webpack will watch for file changes and
15 | rebuild. BrowserSync will refresh the page.
16 |
17 | ## Build
18 |
19 | Running `npm run build` will create a `dist` folder with the `index.html`, `main.js`, `index.css` and `tachyons.css`
20 | files for you to distribute or deploy
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tachyons-webpack",
3 | "version": "1.1.2",
4 | "description": "A boilerplate for using tachyons with webpack",
5 | "main": "src/app.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "dev": "npm run browsersync",
9 | "build": "webpack --config webpack.config.js --debug --progress && rm ./dist/tachyons.js",
10 | "clean": "rm -rf ./dist",
11 | "browsersync": "node bin/server.js"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/tachyons-css/tachyons-webpack.git"
16 | },
17 | "keywords": [
18 | "tachyons",
19 | "webpack",
20 | "boilerplate"
21 | ],
22 | "author": "Garren Smith ",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/tachyons-css/tachyons-webpack/issues"
26 | },
27 | "homepage": "https://github.com/tachyons-css/tachyons-webpack#readme",
28 | "dependencies": {
29 | "babel-core": "^6.18.0",
30 | "babel-loader": "^7.1.1",
31 | "babel-preset-es2015": "^6.18.0",
32 | "babel-preset-stage-0": "^6.16.0",
33 | "browser-sync": "^2.17.5",
34 | "bs-fullscreen-message": "^1.1.0",
35 | "copy-webpack-plugin": "^4.0.0",
36 | "css-loader": "^0.28.4",
37 | "extract-text-webpack-plugin": "^3.0.0",
38 | "strip-ansi": "^4.0.0",
39 | "style-loader": "^0.18.2",
40 | "tachyons": "4.8.0",
41 | "webpack": "^3.5.4",
42 | "webpack-dev-middleware": "^1.8.4",
43 | "webpack-dev-server": "^2.7.1"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/bin/server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Require Browsersync along with webpack and middleware for it
3 | */
4 | var browserSync = require('browser-sync').create();
5 | var webpack = require('webpack');
6 | var webpackDevMiddleware = require('webpack-dev-middleware');
7 | var stripAnsi = require('strip-ansi');
8 |
9 | /**
10 | * Require ./webpack.config.js and make a bundler from it
11 | */
12 | var webpackConfig = require('../webpack.config');
13 | var bundler = webpack(webpackConfig);
14 |
15 | /**
16 | * Reload all devices when bundle is complete
17 | * or send a fullscreen error message to the browser instead
18 | */
19 | bundler.plugin('done', function (stats) {
20 | if (stats.hasErrors() || stats.hasWarnings()) {
21 | return browserSync.sockets.emit('fullscreen:message', {
22 | title: "Webpack Error:",
23 | body: stripAnsi(stats.toString()),
24 | timeout: 100000
25 | });
26 | }
27 | browserSync.reload();
28 | });
29 |
30 | /**
31 | * Run Browsersync and use middleware for Hot Module Replacement
32 | */
33 | browserSync.init({
34 | server: 'server',
35 | open: false,
36 | logFileChanges: false,
37 | middleware: [
38 | webpackDevMiddleware(bundler, {
39 | publicPath: webpackConfig.output.publicPath,
40 | stats: {colors: true}
41 | })
42 | ],
43 | plugins: ['bs-fullscreen-message'],
44 | files: [
45 | 'css/**/*.css',
46 | 'src/**/*.js',
47 | 'index.html'
48 | ]
49 | });
50 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 |
3 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
4 | var CopyWebpackPlugin = require('copy-webpack-plugin');
5 |
6 | module.exports = {
7 | entry: {
8 | app: './src/app.js',
9 | tachyons: 'tachyons/css/tachyons.css',
10 | index: './css/index.css'
11 | },
12 | plugins: [
13 | new ExtractTextPlugin('[name].css', {allChunks: true}),
14 | new CopyWebpackPlugin([{ from: 'index.html' }])
15 | ],
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.js?$/,
20 | exclude: /node_modules/,
21 | loader: 'babel'
22 | },
23 | {
24 | test: /\.css$/,
25 | loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
26 | },
27 | {
28 | test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
29 | loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
30 | },
31 | {
32 | test: /\.woff2(\?\S*)?$/,
33 | loader: 'url?limit=10000&mimetype=application/font-woff2&name=fonts/[name].[ext]'
34 | },
35 | {
36 | test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
37 | loader: 'url?limit=10000&mimetype=application/font-tff&name=fonts/[name].[ext]'
38 | },
39 | {
40 | test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
41 | loader: 'file?name=fonts/[name].[ext]'
42 | },
43 | {
44 | test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
45 | loader: 'file?name=img/[name].[ext]'
46 | },
47 | {
48 | test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
49 | loader: 'file?name=img/[name].[ext]'
50 | },
51 | {
52 | test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
53 | loader: 'url?limit=10000&mimetype=image/svg+xml&name=img/[name].[ext]'
54 | }
55 | ]
56 | },
57 | resolve: {
58 | extensions: ['', '.js']
59 | },
60 | output: {
61 | path: __dirname + '/dist/',
62 | publicPath: '/',
63 | filename: '[name].js'
64 | },
65 | devServer: {
66 | port: 3000,
67 | historyApiFallback: {
68 | index: 'index.html'
69 | }
70 | }
71 | };
72 |
--------------------------------------------------------------------------------