Vkládání css a js do latte a jejich automatická konfigurace

Zkus se podivat na https://jiripudil.cz/…with-webpack.

Tak já se opovážím schrnout mé poznatky za posledních pár dní kdy jsem se stím trápil a neustále to měníl.

Vykašlete se na webloader, silná slova já vím, hned vysvětlím proč. Webloader neumí aktuálně pracovat se source maps což činí vývoj less a minifikovaného JS „naprosto nemožný“, webloader je pomaaaaallýýýý a dokumentace vlastně téměř neexistuje.
Jak to tedy vyřešit ?
Mé prasácké řešení trochu inspirované DI ve smyslu: ať se postará někdo jiný.

1. kopírování a kompilaci provádí Grunt
2. v příslušných složkách si soubory vyzvedne můj „zatím totálně testovací component“ který je vloží do šablony

Veškeré kódy jsou totálně prasácke a proto je berte pouze jako inspiraci a ne jako copy&paste řešení. Neměl jsem sílu je už projít a uhladit, okomentovat nebo vyřešit vyjímky atd.

Gruntfile.js:

'use strict';
module.exports = function (grunt) {

    require('load-grunt-tasks')(grunt);
    require('time-grunt')(grunt);

    /*
     * Read database config from neon
     */
    var configFile = grunt.file.read("app/config/config.local.neon");
    var regExpDbHost = new RegExp('host: (.*)', 'g');
    var regExpDbName = new RegExp('database: (.*)', 'g');
    var regExpDbUser = new RegExp('username: \'(.*)\'', 'g');
    var regExpDbPassword = new RegExp('password: \'(.*)\'', 'g');
    var dbConfig = {
        host: regExpDbHost.exec(configFile)[1],
        user: regExpDbUser.exec(configFile)[1],
        pass: regExpDbPassword.exec(configFile)[1],
        database: regExpDbName.exec(configFile)[1]
    };


    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        /**
         * Clean temp folders
         * package: grunt-contrib-clean
         */
        clean: {//clean compiled and packages files
            build: ['./www/assets/', './assets/included/', './temp/cache/', './assets/less-compiled/', './assets/js-compiled/']
        },
        /**
         * Copy assets
         * package: grunt-contrib-copy
         */
        copy: {
            assetsBuild: {
                files: [
                    /**
                     * Bootstrap
                     */
                    {expand: true, cwd: './node_modules/bootstrap/fonts/', src: ['**'], dest: './www/assets/fonts/'}, //bootstrap-fonts
                    {expand: true, cwd: './node_modules/bootstrap/dist/js/', src: ['*.*'], dest: './assets/included/bootstrap/js/', }, //bootstrap-js
                    {expand: true, cwd: './node_modules/bootstrap/less/', src: ['**/*.*'], dest: './assets/included/bootstrap/less/'}, //bootstrap-js
                    /**
                     * SB admin 2
                     */
                    {expand: true, cwd: './node_modules/startbootstrap-sb-admin-2/vendor/', src: ['**/*.*'], dest: './assets/included/sbadmin2/vendor/'}, //startbootstrap-sb-admin2 - vendor
                    {expand: true, cwd: './node_modules/startbootstrap-sb-admin-2/less/', src: ['**/*.*'], dest: './assets/included/sbadmin2/less/'}, //startbootstrap-sb-admin2 - vendor
                    {expand: true, cwd: './node_modules/startbootstrap-sb-admin-2/js/', src: ['**/*.*'], dest: './assets/included/sbadmin2/js/'}, //startbootstrap-sb-admin2 - vendor
                    {expand: true, cwd: './node_modules/startbootstrap-sb-admin-2/vendor/font-awesome/fonts/', src: ['**/*.*'], dest: './www/assets/fonts/'}, //startbootstrap-sb-admin2 - vendor
                    /**
                     * JQuery
                     */
                    {expand: true, cwd: './node_modules/jquery/dist/', src: ['**/*.*'], dest: './assets/included/jquery/js/'}, //startbootstrap-sb-admin2 - vendor
                ],
            },
            compiledCopy: {
                files: [
                    {expand: true, cwd: './assets/less-compiled/', src: ['**/*.css'], dest: './www/assets/css/'}, //compiled css
                    {expand: true, cwd: './assets/less-compiled/', src: ['**/*.map'], dest: './www/assets/css/'}, //compiled map
                    {expand: true, cwd: './assets/js-compiled/', src: ['**/*.js'], dest: './www/assets/js/'} //compiled js
                ]
            }
        },
        /**
         * Compile LESS files
         */
        less: {
            development: {
                options: {
                    paths: ['assets/css'],
                    //sourceMapBasepath: '../assets/less-compiled/',
                    //sourceMapRootpath: '../assets/less-compiled/',
                    outputSourceFiles: true,
                    sourceMap: true
                },
                files: {
                    'assets/less-compiled/01-global.css': 'assets/less/global.less',
                    'assets/less-compiled/02-bbBootstrap.css': 'assets/less/barcodeBarrier/bbBootstrap.less',
                    'assets/less-compiled/03-sb-admin-2.css': 'assets/included/sbadmin2/less/sb-admin-2.less',
                    'assets/less-compiled/04-metisMenu.min.css': 'assets/included/sbadmin2/vendor/metisMenu/metisMenu.min.css',
                    'assets/less-compiled/05-font-awesome.min.css': 'assets/included/sbadmin2/vendor/font-awesome/css/font-awesome.min.css'
                }
            },
            production: {
                /*options: {
                 paths: ['assets/css'],
                 plugins: [
                 new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]}),
                 new (require('less-plugin-clean-css'))(cleanCssOptions)
                 ],
                 modifyVars: {
                 imgPath: '"http://mycdn.com/path/to/images"',
                 bgColor: 'red'
                 }
                 },
                 files: {
                 'path/to/result.css': 'path/to/source.less'
                 }
                 }*/
            }
        },
        /**
         * Concat JS Files
         */
        concat: {
            jsDevelop: {
                options: {sourceMap: true},
                src: [
                    'assets/included/jquery/js/jquery.min.js',
                    'assets/included/bootstrap/js/bootstrap.min.js',
                    'assets/js/global.js',
                    'assets/included/sbadmin2/vendor/metisMenu/metisMenu.min.js',
                    'assets/included/sbadmin2/js/sb-admin-2.js'
                ],
                dest: 'www/assets/js/all.js',
            },
            extras: {
                src: ['src/main.js', 'src/extras.js'],
                dest: 'dist/with_extras.js',
            },
        },

        /**
         * Watch files at develop mode
         * package: grunt-contrib-watch
         */
        watch: {
            options: {livereload: true},
            files: ['./assets/**/*.*', './app/**/*.*'],
            tasks: ['compile'],
        },
        /**
         * Bump version to next release and commit it
         * package: grunt-bump
         */
        bump: {
            options: {
                message: 'Released v<%= pkg.version %>!',
                pushTo: 'origin'
            }
        },
        /**
         * Database backup
         * package: grunt-mysql-dump
         */
        db_dump: {
            options: {
                // common options should be defined here
            },
            // "Local" target
            "local": {
                "options": {
                    "title": "Local DB",
                    "database": dbConfig["database"],
                    "user": dbConfig["user"],
                    "pass": dbConfig["pass"],
                    "host": dbConfig["host"],
                    "backup_to": "database/local.sql"
                }
            }
        }
    });


    /**
     * CUSTOM TASKS
     */
    grunt.registerTask('default', 'Default grunt task', function (arg) {

    });

    // build project = download all packages, install and compile
    grunt.registerTask('build', [
        'clean:build',
        'npm-install',
        'composer:install',
        'copy:assetsBuild',
        'compile'
    ]);

    // compile project = just compile less and copy with js to www/assets
    grunt.registerTask('compile', [
        'less:development',
        'concat:jsDevelop',
        'copy:compiledCopy'
    ]);

    //backup database to dump file
    grunt.registerTask('dbBackup', [
        'db_dump:local'
    ]);

    grunt.registerTask('release', [
        'bump-only',
        'dbBackup',
        'bump-commit'
    ]);
};

Utilita která si kód vyzvedává k inspiraci na mém repu:
https://bitbucket.org/…-assetloader

Doufám že to někomu pomůže.

Editoval Fires (14. 8. 2017 22:15)

Diky za poznatek :) Urcite zapracuji cache busting do sve mini utility a casem ji odladim aby byla i publikovatelna na composeru ..