ESC
Documentation
Version

Task Runner

In one word automation for Madosel. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Webpack, Gulp, Grunt, a task runner can do most of that mundane work for you-and your team-with basically zero effort.

Learn how to include Madosel in your project using Webpack, Gulp, Grunt or other bundlers.
For Madosel to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer.
  • Learn how to include Madosel in your project using Webpack bundler
  • Check for node, npm and yarn
    Copy
    npm install --save-dev webpack
    yarn add webpack --dev
  • Copy
    
        / ...
        {
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                    },
                    {
                        loader: 'sass-loader',
                    },
                ],
            },
            {
                test: /\.m?js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        babelrc: false,
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }
        }
        // ...
        
    Copy
    @import 'madosel';
  • Learn how to include Madosel in your project using Gulp bundler
  • Check for node, npm and yarn
    Copy
    npm install --save-dev gulp
    yarn add gulp --dev
  • Copy
    
        function sassify(done) {
            return (
            src('assets/sass/**/*.scss')
            .pipe(sass({
                outputStyle: 'expanded',
                includePaths: ['node_modules/madosel/src/scss'],
            }).on('error', sass.logError))
            .pipe(dest('assets/css'))
            );
            done()
        }
        
    Copy
    @import 'madosel';
  • Learn how to include Madosel in your project using Grunt bundler
  • Check for node, npm, and yarn
    Copy
    npm install --save-dev grunt
    yarn add grunt --dev
  • Copy
    
        sass: {
            dist: {
                options: {
                style: 'expanded',
                loadPath: ['node_modules/madosel/src/scss']
                },
                files: {
                'main.css': 'main.scss'
                }
            }
        }
        
    Copy
    @import 'madosel';
If you like the content
BUY ME A COFFEE