Grunt v ASP .NET Core a Visual Studio 2017 - časť 2

DOWNLOAD

V predošlej časti sme si pripravili ASP .NET Core projekt s Razor Pages a konfiguráciou pre dve rôzne prostredia Development a Production. Teraz si ukážeme ako nastaviť grunt tak, aby sa púšťal pri builde projektu a v závislosti od zvolenej konfigurácie projektu (napr. Debug alebo Release) púšťal rôzne grunt tasky.

V Index.cshtml už máme kód, ktorý pre Development prostredie referencuje štýl zo súboru style.css a pre iné ako Development prostredie referencuje štýl zo súboru style.min.css.

Do projektu pridáme priečinok less a do neho súbor site.less s nasledovným obsahom:

html, body {
    margin
: 0;
    padding
: 0;
    width
: 100%;
    height
: 100%;
    position
: fixed;
    overflow
: hidden;
    font-size
: 14px;
}

*:focus {
    outline
: none;
}
Obsah súboru site.less

Do priečinka wwwroot pridáme nový priečinok css. Do tohto priečinka bude grunt task ukladať výsledok kompilácie less súborov.

 

Pravým tlačidlom klikneme v okne Solution Explorer na projekt a zvolíme možnosť
  • Add
  • New Item...
  • npm Configuration File
a pridáme nový súbor package.json s nasledovným obsahom:
{
  
"version""1.0.0",
  
"name""demo",
  
"private"true,
  
"devDependencies": {
    
"grunt""1.0.2",
    
"grunt-contrib-clean""1.1.0",
    
"grunt-contrib-jshint""1.1.0",
    
"grunt-contrib-concat""1.0.1",
    
"grunt-contrib-uglify""3.3.0",
    
"grunt-contrib-watch""1.0.0",
    
"grunt-contrib-less""1.4.1",
    
"grunt-contrib-csslint""2.0.0",
    
"grunt-contrib-cssmin""2.2.1",
    
"grunt-contrib-copy""1.0.0",
    
"grunt-html""9.0.0",
    
"grunt-contrib-requirejs""1.0.0"
  
}
}
package.json

Do projektu pridáme nový súbor gruntfile.js, v ktorom budeme konfigurovať grun tasky. Začneme trochu od konca, a ako prvý si zadefinujeme clean task pre vyčistenie priečinka wwwroot/css. Upravíme obsah súboru gruntfile.js nasledovne:

module.exports = function (grunt) {
    
// Konfigurácia grunt taskov
    
grunt.initConfig({
        clean: {
            css: [
                
"wwwroot/css/*"
            
]
        }
    })
;

    
// Nacítanie grunt modulov
    
grunt.loadNpmTasks("grunt-contrib-clean");

    
// Zaregistrovanie vlastných taskov
    
grunt.registerTask("cleanTask", cleanTask);

    
// Clean task
    
function cleanTask() {
        
// Toto je len informacný výpis do konzoly
        
grunt.log.writeln("Running \"cleanTask\"");

        
// Zoznam grunt taskov, ktoré sa majú vykonat
        
var tasks [
            
"clean:css"
        
];

        
// Spustíme tasky
        
grunt.task.run.apply(grunt.task, tasks);
    
}
}
;
Clean task pre vyčistenie priečinka wwwroot/css

Aby sme si overili, či task funguje, môžeme pridať do priečinka wwwroot/css ľubovoľný obsah a v okne Task Runner Explorer kliknúť pravým tlačidlom na cleanTask a z kontextového menu zvoliť možnosť Run.

 

Aby sme však nemuseli task púšťať manuálne nabindujeme ho na udalosť Clean Build a to tak, že v okne Task Runner Explorer klikneme pravým tlačidlom na cleanTask a zvolíme možnosť
  • Bindings
  • Clean Build
.
Task Runner Explorer
Task Runner Explorer

Obdobným spôsobom zadefinujeme buildTask, ktorý nabindujeme na udalosť After Build. V build tasku zavoláme grunt tasky, ktoré:

  • do priečinka wwwroot/css prekopírujú všetky css súbory z priečinka css (môžu to byť napr. externé knižnice ako leaflet.css),
  • skompiluje less súbory a uloží ich do priečinka wwwroot/css,
  • zvaliduje obsah css súborov.

Doplníme súbor gruntfile.js o nasledovné volania:

module.exports = function (grunt) {
    
// Konfigurácia grunt taskov
    
grunt.initConfig({
        
// ...
        
copy: {
            css: {
                files: [{
                    expand: 
true,
                    cwd: 
"css/",
                    src: [
"**"],
                    dest: 
"wwwroot/css/",
                    filter: 
"isFile"
                
}]
            }
        },
        less: {
            options: {
                paths: [
"less"],
                strictMath: 
false
            
},
            src: {
                files: {
                    
"wwwroot/css/site.css""less/site.less"
                
}
            }
        },
        csslint: {
            options: {
                
"universal-selector"false,
                
"order-alphabetical"false,
                
"outline-none"false
            
},
            src: [
                
"wwwroot/css/**/*.css",
                
// Externé štýly ignorujeme
                
"!wwwroot/css/leaflet.css",
                
"!wwwroot/css/**/*.min.css"
            
]
        }        
    })
;

    
// Nacítanie grunt modulov
    // ...
    
grunt.loadNpmTasks("grunt-contrib-copy");
    
grunt.loadNpmTasks("grunt-contrib-less");
    
grunt.loadNpmTasks("grunt-contrib-csslint");

    
// Zaregistrovanie vlastných taskov
    // ...
    
grunt.registerTask("buildTask", buildTask);

    
// Build task
    
function buildTask() {
        
// Toto je len informacný výpis do konzoly
        
grunt.log.writeln("Running \"buildTask\"");
        
        
// Zoznam grunt taskov, ktoré sa majú vykonat
        
var tasks [
            
"copy:css",
            
"less",
            
"csslint"
        
];

        
// Spustíme tasky
        
grunt.task.run.apply(grunt.task, tasks);
    
}
}
;
Build task

V prostredí Development referencujeme súbor site.css. Pre prostredie Production ale referencujeme súbor site.min.css. Tento súbor vytvoríme pomocou tasku cssmin, ale iba ak je aplikácia buildovaná s konfiguráciou Release.

Aby sme v grunt tasku vedeli, s akou konfiguráciou je projekt buildovaný urobíme malý trik. V okne Solution Explorer klikneme pravým tlačidlom na projekt a zvolíme možnosť Properties. Na karte Build Events vložíme do textového poľa Pre-buil event command line nasledovný príkaz:

echo { "configuration": "$(ConfigurationName)" }>"$(ProjectDir)buildConfiguration.json"
Pre-buil event command line

Tento príkaz pred každým build-om vytvorí súbor buildConfiguration.json a zapíše do neho JSON objekt s vlastnosťou configuration, ktorej hodnota je hodnota aktuálne zvolenej konfigurácie. Obsah tohto súboru môžeme následne jednoducho načítať v grunt tasku a v závislosti od danej konfigurácie dynamicky vytvoriť zoznam grunt taskov, ktoré sa majú spustiť, viď. upravený súbor gruntfile.js:

module.exports = function (grunt) {
    
// Konfigurácia grunt taskov
    
grunt.initConfig({
        
// ...
        
cssmin: {
            options: {
            },
            build: {
                files: [{
                    expand: 
true,
                    cwd: 
"wwwroot/css",
                    src: [
"*.css""!*.min.css"],
                    dest: 
"wwwroot/css",
                    ext: 
".min.css"
                
}]
            }
        },        
        concat: {
            css: {
                src: [
                    
// Spojime do jedneho suboru aj externe styly
                    
"wwwroot/css/leaflet.min.css",
                    
"wwwroot/css/site.min.css"
                
],
                dest: 
"wwwroot/css/site.min.css"
            
}
        }        
    })
;

    
// Nacítanie grunt modulov
    // ...
    
grunt.loadNpmTasks("grunt-contrib-cssmin");
    
grunt.loadNpmTasks("grunt-contrib-concat");

    
// Build task
    
function buildTask() {
        
// Nacítanie obsahu súboru buildConfiguration.json
        
var cnf grunt.file.readJSON("buildConfiguration.json").configuration;

        
// Toto je len informacný výpis do konzoly
        
grunt.log.writeln("Running \"buildTask\" task using \"" + cnf + "\"");

        
// Zoznam grunt taskov, ktoré sa majú vykonat
        
var tasks [];

        
// Rôzne grunt tasky v závislosti od konfigurácie
        
switch (cnf.toUpperCase()) {
            
case "DEBUG":
                tasks.push(
"copy:css");
                
tasks.push("less");
                
tasks.push("csslint");
                break;
            case 
"RELEASE":
                tasks.push(
"copy:css");
                
tasks.push("less");
                
tasks.push("csslint");
                
tasks.push("cssmin");
                
tasks.push("concat:css");
                break;
            default
:
                grunt.fail.fatal(
"Unknown configuration '" + cnf + "'");
                break;
        
}

        
// Run tasks
        
grunt.task.run.apply(grunt.task, tasks);
    
}
}
;
Rôzne grunt tasky v závislosti od zvolenej konfigurácie

V ďalšej časti si ukážeme ako pomocou grunt tasku a require.js vieme zbundlovať aplikáciu do jedného js súboru spolu s rôznymi konfiguráciami pre rôzne prostredia.

Publikované Wednesday, April 25, 2018 7:38 AM xxxmatko

Komentáre

# Grunt v ASP .NET Core a Visual Studio 2017 - časť 3 final

Wednesday, April 25, 2018 7:44 AM xxxmatko blog

DOWNLOAD V predošlej časti sme vytvorili základný cleanTask a buildTask , ktorý v závislosti od zvolenej