Let webpack handle the css/less/fonts

2016-11-17 17:45:16 +01:00 · 2016-11-17 17:45:16 +01:00 · 51e499dfea
commit 51e499dfea
parent 321710a5d8
7 changed files with 633 additions and 117 deletions
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@ -1,6 +1,5 @@
 import gulp from 'gulp';
 import babel from 'gulp-babel';
-import less from 'gulp-less';
 import del from 'del';
 import webpack from 'webpack-stream';
 import webpackConfig from './webpack.config.babel';
@ -9,13 +8,6 @@ const paths = {
  allSrcJs: 'src/**/*.js?(x)',
  jsSrc: 'src/public/js/app.js',
  jsDistDir: 'build/public/js',
-  lessSrc: 'src/public/less/app.less',
-  lessDest: 'build/public/css',
-  fontSrc: [
-    './node_modules/font-awesome/fonts/*',
-    './node_modules/bootstrap/fonts/*',
-  ],
-  fontDest: 'build/public/fonts',
  imgSrc: 'src/public/img/*',
  imgDest: 'build/public/img/',
  htmlSrc: 'src/public/index.html',
@ -24,19 +16,6 @@ const paths = {
  webpackFile: 'webpack.config.babel.js',
 };

-gulp.task('less', () =>
-    gulp.src(paths.lessSrc)
-  .pipe(less({
-    paths: [ './node_modules' ]
-  }))
-  .pipe(gulp.dest(paths.lessDest))
-);
-
-gulp.task('fonts', () =>
-  gulp.src(paths.fontSrc)
-    .pipe(gulp.dest(paths.fontDest))
-);
-
 gulp.task('images', () =>
  gulp.src(paths.imgSrc)
    .pipe(gulp.dest(paths.imgDest))
@ -53,11 +32,10 @@ gulp.task('js', () =>
  .pipe(gulp.dest(paths.jsDistDir))
 );

-gulp.task('main', ['less', 'fonts', 'images', 'html', 'js'])
+gulp.task('main', ['images', 'html', 'js'])

 gulp.task('watch', () => {
  gulp.watch(paths.allSrcJs, ['js']);
-  gulp.watch(paths.lessSrc, ['less']);
  gulp.watch(paths.imgSrc, ['images']);
  gulp.watch(paths.htmlSrc, ['html']);
 });
--- a/package.json
+++ b/package.json
@ -34,12 +34,15 @@
        "babel-loader": "^6.2.7",
        "babel-preset-latest": "^6.16.0",
        "babel-preset-react": "^6.16.0",
+        "css-loader": "^0.26.0",
        "del": "^2.2.2",
-        "fontify": "0.0.2",
+        "file-loader": "^0.9.0",
        "gulp": "^3.9.1",
        "gulp-babel": "^6.1.2",
-        "gulp-less": "^3.3.0",
        "less": "^2.7.1",
+        "less-loader": "^2.2.3",
+        "style-loader": "^0.13.1",
+        "url-loader": "^0.5.7",
        "webpack-stream": "^3.2.0"
    }
 }
--- a/src/public/index.html
+++ b/src/public/index.html
@ -5,9 +5,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Canapé</title>
-
-    <link href="/css/app.css" rel="stylesheet">
-
  </head>
  <body>
    <div id="app"></div>
--- a/src/public/js/app.js
+++ b/src/public/js/app.js
@ -7,6 +7,9 @@ import { Router, Route, IndexRoute, IndexRedirect, Link, hashHistory } from 'rea
 import { routerActions } from 'react-router-redux'
 import { UserAuthWrapper } from 'redux-auth-wrapper'

+// Style
+import '../less/app.less'
+
 // Root reducer
 import rootReducer from './reducers/index'

--- a/src/public/less/app.less
+++ b/src/public/less/app.less
@ -1,5 +1,5 @@
-@import "bootstrap/less/bootstrap.less";
-@import "font-awesome/less/font-awesome.less";
+@import "~bootstrap/less/bootstrap.less";
+@import "~font-awesome/less/font-awesome.less";

 body {
  padding-top: 70px;
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@ -7,11 +7,17 @@ export default {
  devtool: 'source-map',
  module: {
    loaders: [
+      {
+        test: /\.less$/,
+        loader: 'style-loader!css-loader!less-loader',
+      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: [/node_modules/],
      },
+      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
+      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ],
  },
  plugins: [
--- a/yarn.lock
+++ b/yarn.lock