Skip to content

Commit

Permalink
Move sass compilation to webpack and remove sass tasks from grunt
Browse files Browse the repository at this point in the history
  • Loading branch information
@hugo-vrijswijk
hugo-vrijswijk committed Sep 22, 2018
1 parent 712483d commit 493ec66
Show file tree
Hide file tree
Showing 6 changed files with 719 additions and 407 deletions.
20 changes: 3 additions & 17 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
const md = require('jstransformer')(require('jstransformer-markdown-it'));
const webpackConfig = require('./webpack.config');

const sass = require('./tasks/grunt-sass');

module.exports = function (grunt) {

grunt.loadNpmTasks('grunt-contrib-pug');
Expand All @@ -11,22 +9,17 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-webpack');
grunt.loadNpmTasks('grunt-npm');
sass(grunt);

const watchConfig = {
options: {
livereload: true
},
sass: {
files: ['src/**/*.scss'],
tasks: ['sass']
},
pug: {
files: ['src/**/*.pug', 'src/**/*.js', 'src/**/*.json'],
tasks: ['pug']
},
webpack: {
files: ['src/js/**/*.js'],
files: ['src/js/**/*.js', 'src/scss/**/*.scss', 'webpack.config.js'],
tasks: ['webpack:dev']
}
};
Expand Down Expand Up @@ -66,13 +59,6 @@ module.exports = function (grunt) {
}
},

sass: {
all: {
src: ['src/scss/all.scss'],
dest: 'generated-root/css/all.css'
}
},

pug: {
compile: {
options: {
Expand Down Expand Up @@ -106,6 +92,6 @@ module.exports = function (grunt) {


grunt.initConfig(config);
grunt.registerTask('serve', ['clean', 'webpack:dev', 'sass', 'pug', 'connect', 'watch']);
grunt.registerTask('build', ['clean', 'webpack:prod', 'sass', 'pug', 'npm-contributors']);
grunt.registerTask('serve', ['clean', 'webpack:dev', 'pug', 'connect', 'watch']);
grunt.registerTask('build', ['clean', 'webpack:prod', 'pug', 'npm-contributors']);
};

11 comments on commit 493ec66

@nicojs
Copy link
Member

@nicojs nicojs commented on 493ec66 Sep 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, any specific reason for this? I was looking for my good old sass compiler and couldn't find it 😆

@hugo-vrijswijk
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, sorry. RIP good old sass compiler. Mostly for cleanup. I was looking into removing grunt altogether and just using webpack instead. Instead of having 2 tools do similar things. But was running into some problems with pug (there is a webpack plugin, but I couldn't get it to work yet with the fillViewModel). Might get back to that tomorrow

@nicojs
Copy link
Member

@nicojs nicojs commented on 493ec66 Sep 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... moving pug over could proof difficult. I'm happy with leaving that in grunt. It isn't webpack's specialty, lets keep it for bundling and some transpiling.

The css output doesn't seem to be minimized yet. I just ran grunt build, that should do it right?

@hugo-vrijswijk
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In theory, yes. I've added the minimize parameter to css-loader but that doesn't seem to do anything when I try it

@nicojs
Copy link
Member

@nicojs nicojs commented on 493ec66 Sep 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, i'll open an issue 🐛

@hugo-vrijswijk
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only problem I ran into with the pug files was that the grunt plugin data parameter accepts a function ((dest) => ...) which is used for filling the viewmodel. The html-pug-loader plugin I tried doesn't seem to have that functionality for giving a function.

@nicojs
Copy link
Member

@nicojs nicojs commented on 493ec66 Sep 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I can take a look. Sounds to be doable and one build system is better than 2. Could you create an issue with the info?

@bartekleon
Copy link
Member

@bartekleon bartekleon commented on 493ec66 Sep 22, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicojs. I'm working on " I've added the minimize parameter to css-loader but that doesn't seem to do anything when I try it"

@bartekleon
Copy link
Member

@bartekleon bartekleon commented on 493ec66 Sep 22, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And done.
@hugo-vrijswijk install cssnano and postcss-loader

webpack.config.js

const path = require('path');
module.exports = {
  entry: ['./src/js/all.js', './src/scss/all.scss'],
  output: {
    path: path.resolve(__dirname, 'generated-root'),
    filename: 'js/all.bundle.js'
  },
  mode: 'production',
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        { 
          loader: 'file-loader',
          options: { 
            name: 'css/[name].css' 
          }
        }, // Extract css into seperate file
        'postcss-loader',
        'extract-loader',
        'css-loader?-minimize',
        'sass-loader' // compiles Sass to CSS, using Node Sass
      ]
    }
  ]
  }
};

postcss.config.js (in root folder)

module.exports = {
  plugins: {
    'cssnano': {}
  }
}

@nicojs
Copy link
Member

@nicojs nicojs commented on 493ec66 Sep 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kmdrGroch 💐 thanks for your help! I've added it and it works like a charm. However, now it also does minification during normal builds, but that's fine for tonight. I will close this PR so I can publish the website. Fingers crossed.

@bartekleon
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicojs you can try making some --dev --prod webpack configs. I think it is supported by webpack itself so no pain at all.
All you need is to remove postcss-loader from --dev and should be good

Please sign in to comment.