Schreiben Sie ein fantastisches Build -Skript mit Grunzen

Dieser Leitfaden zeigt, wie Sie Grunzen, ein leistungsstarkes Build -System für moderne Webprojekte, konfigurieren. Nach Abschluss automatisiert Ihre Gruntfile Aufgaben, darunter: Kopieren von Dateien, Aufräumarbeiten, Stylus -Kompilierung mit Anbieter -Präfixing, Coffeescript -Kompilierung, CSS und JavaScript -Minifikation, Jade -Kompilierung, automatischer Wiederaufbau von Quellwechsel und einem lokalen Entwicklungsserver.

.

Schlüsselkonzepte

• Grunzen ein Setup: package.json node.js, npm und die grunzige cli installieren. Initialisieren Sie Ihr Projekt als NPM -Paket und definieren Sie Abhängigkeiten in
, um Grunzen -Plugins zu verwalten.
• Taskkonfiguration: grunt.initConfig Verwenden Sie
, um Aufgaben zu definieren (z. B. Dateikopieren, Reinigung, Styl/Coffeescript/Jade -Zusammenstellung). Unteraufgaben ermöglichen mehrere Konfigurationen in einer einzelnen Aufgabe.
• Automatisierung & Optimierung:
Hebel -Plugins wie Autoprefixer (CSS -Anbieter -Präfixe), Uglifyjs (JavaScript Minification) und CSSMin (CSS -Komprimierung) zur Verbesserung der Leistung.
• Entwicklungsworkflow: grunt-contrib-watch implementieren grunt-contrib-connect für den automatischen Wiederaufbau von Quelländerungen und
für einen netzwerkgängigen Entwicklungsserver.
• benutzerdefinierte Aufgaben: grunt.registerTask Erstellen Sie benutzerdefinierte Aufgaben über
zu Kettenvorgängen (z. B. Reinigung, Kompilieren, Kopieren), Förderung der Modularität und Wartbarkeit.

Erste Schritte

npm install -g grunt-cli node.js und npm installieren. Installieren Sie die Grunz CLI weltweit: package.json. Erstellen Sie eine

Datei mit dem folgenden Inhalt:

<code class="language-json">{
  "name": "grunt_tutorial",
  "description": "Grunt setup for web development.",
  "author": "Landon Schropp (http://landonschropp.com)",
  "dependencies": {
    "grunt": "0.x.x",
    "grunt-autoprefixer": "0.2.x",
    "grunt-contrib-clean": "0.5.x",
    "grunt-contrib-coffee": "0.7.x",
    "grunt-contrib-connect": "0.4.x",
    "grunt-contrib-copy": "0.4.x",
    "grunt-contrib-cssmin": "0.6.x",
    "grunt-contrib-jade": "0.8.x",
    "grunt-contrib-jshint": "0.6.x",
    "grunt-contrib-stylus": "0.8.x",
    "grunt-contrib-uglify": "0.2.x",
    "grunt-contrib-watch": "0.5.x"
  },
  "engine": "node >= 0.10"
}</code>

npm install Dies definiert Ihr Projekt und seine Abhängigkeiten. Führen Sie

aus, um sie zu installieren.

Dateikopieren und Erstellen von Reinigung

Gruntfile.js Quellcode beibehalten und Dateien separat erstellen. Erstellen Sie ein

:

<code class="language-javascript">module.exports = function(grunt) {
  grunt.initConfig({
    copy: {
      build: {
        cwd: 'source',
        src: [ '**', '!**/*.styl', '!**/*.coffee', '!**/*.jade' ], // Exclude compiled files
        dest: 'build',
        expand: true
      },
    },
    clean: {
      build: { src: [ 'build' ] },
      stylesheets: { src: [ 'build/**/*.css', '!build/application.css' ] },
      scripts: { src: [ 'build/**/*.js', '!build/application.js' ] },
    },
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('build', ['clean:build', 'copy']);
};</code>

source Diese kopiert Dateien von build nach build und reinigt das grunt build Verzeichnis. Ausführen

.

(Die verbleibenden Abschnitte, in denen Stylus, Autoprefixer, CSS -Minifikation, Coffeescript, Uglify, Jade, Watch und der Entwicklungsserver entführt werden Um das Paraphrasieren zu erreichen.

Schlussfolgerung

Dieser optimierte Leitfaden bietet eine Grundlage für den Aufbau robuster und effizienter grunzbasierter Build-Prozesse. Entdecken Sie das riesige Grunz -Plugin -Ökosystem, um Ihren Workflow weiter anzupassen.

Das obige ist der detaillierte Inhalt vonSchreiben Sie ein fantastisches Build -Skript mit Grunzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!