Jak połączyć i minifikować wiele plików CSS i JavaScript za pomocą Grunt.js (0.3.x)

uwaga: to pytanie dotyczy tylko Grunt 0.3.x i został pozostawiony w celach informacyjnych. O pomoc w najnowszym Grunt 1.x release proszę zobaczyć mój komentarz poniżej tego pytania.

Obecnie próbuję użyć Grunta.js, aby skonfigurować automatyczny proces budowania do najpierw łączenia, a następnie minifikowania plików CSS i JavaScript.

Udało mi się z powodzeniem połączyć i minifikować moje pliki JavaScript, chociaż za każdym razem, gdy uruchamiam grunt, wydaje się, że wystarczy dołączyć do pliku zamiast nadpisywać je.

Jeśli chodzi o minifikację lub nawet konkatenację CSS, nie byłem jeszcze w stanie tego zrobić!

Jeśli chodzi o moduły CSS próbowałem użyć consolidate-css, grunt-css & cssmin ale bez skutku. Nie mogłem zrozumieć, jak ich używać!

Moja struktura katalogów jest następująca (jest typowym węzłem.js zastosowanie):

  • app.js
  • grunt.js
  • /public / index.html
  • /public / css / [Różne Pliki css]
  • /public / js / [Różne pliki javascript]

Oto, co moje chrząkanie.plik js wygląda obecnie w folderze głównym mojej aplikacji: 

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

Tak dla podsumowania potrzebuję pomocy w dwóch pytaniach:

  1. Jak połączyć i minifikować wszystkie moje pliki css w folderze /public/css/ w jeden plik, powiedzmy main.min.css
  2. dlaczego chrząka.js nadal dołącza do skonkatenowanych i minifikowanych plików javascript concat.js i concat.min.js Pod /public/js/ zamiast nadpisywać je za każdym razem, gdy uruchamiane jest polecenie grunt?

Aktualizacja 5 lipca 2016-aktualizacja z Grunt 0.3.x do Grunt 0.4.x lub 1.x

Grunt.js został przeniesiony do nowej struktury w Grunt 0.4.x (plik nazywa się teraz Gruntfile.js). Proszę zobaczyć mój projekt open source Grunt.js Skeleton do pomocy przy zakładaniu proces budowania dla Grunt 1.x.

Przejście z Grunt 0.4.x do Grunt 1.x nie powinien wprowadzać wielu istotnych zmian .

Author: Jasdeep Khalsa, 2012-12-04
Source

5 answers

Concat.js jest dołączany do plików źródłowych zadania concat public/js/*.js. Możesz mieć zadanie, które usuwa concat.js (Jeśli plik istnieje) przed ponownym połączeniem, przekazać tablicę, aby jawnie określić, które Pliki chcesz połączyć i ich kolejność, lub zmienić strukturę projektu.

Jeśli wykonasz to drugie, możesz umieścić wszystkie swoje źródła Pod ./src, a pliki wbudowane pod ./dest 

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Następnie skonfiguruj swoje concat Zadanie 

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Twój min Zadanie 

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

Zadanie wbudowane min używa UglifyJS, więc potrzebujesz zamiennika. Znalazłem grunt-css jako całkiem dobry. Po zainstalowaniu, załaduj go do pliku grunt 

grunt.loadNpmTasks('grunt-css');

A następnie ustawić go 

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Zauważ, że użycie jest podobne do wbudowanego min.

Zmień swoje default zadanie na 

grunt.registerTask('default', 'concat min cssmin');

Teraz, bieganie grunt przyniesie pożądane rezultaty.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js
 108
Author: jaime,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-06 19:59:46

Chcę tu wspomnieć o bardzo, bardzo ciekawej technice, która jest używana w dużych projektach, takich jak jQuery i Modernizr do konkatenacji rzeczy.

Oba te projekty są w całości opracowane przy użyciu modułów requirejs (widać to w repozytoriach github), a następnie używają optymalizatora requirejs jako bardzo inteligentnego konkatenatora. Ciekawostką jest to, że jak widać, ani jQuery ani Modernizr nie potrzebuje na requirejs do pracy, a dzieje się tak dlatego, że usuwają requirejs rytuał syntaktyczny w celu pozbycia się requirejs w ich kodzie. Tak więc kończą z samodzielną biblioteką, która została opracowana z modułów requirejs! Dzięki temu są w stanie wykonywać m.in. cutsom buildy swoich bibliotek.

Dla wszystkich zainteresowanych połączeniem z requirejs optimizer, sprawdź ten post

Istnieje również małe narzędzie, które abstrahuje wszystkie kotły procesu: AlbanilJS

 12
Author: Augusto Altman Quaranta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-26 21:58:21

Zgadzam się z powyższą odpowiedzią. Ale tutaj jest inny sposób kompresji CSS.

Możesz połączyć swój CSS używając Yui compressor : 

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
};
 10
Author: Anshul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-11 21:28:34

Nie musisz dodawać pakietu concat, możesz to zrobić poprzez cssmin w następujący sposób: 

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

A dla js użyj brzydkiego w ten sposób: 

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }
 3
Author: Inc33,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-21 17:40:04

Myślę, że może być bardziej automatyczny, grunt zadanie usemin dbać, aby zrobić wszystkie te zadania dla Ciebie, wystarczy trochę konfiguracji:

Https://stackoverflow.com/a/33481683/1897196

 0
Author: Donald,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:50