Netbeans IDE Editör ve Grunt

Last Updated : |  

Ipucu

Bu materyal Mac kullanıcıları için uyarlanmıştır



NetBeans homurdandığına, özel yüzeyler aracılığıyla sunulabilecekleri bu şekilde entegre edebilirsin ve burada bunu nasıl entegre edildini adım adım izliye bilirsin. Öncelikle NetBeans'i indir ve yükle:  netbeans.org

Ardından Mac'inize Node.js dosyasını indirip yükle:  nodejs.org

Ve şimdi, Mac'inde Grunt küresel'i (küresel'i başka projeler için de kullanabilirsin) kur, terminalini aç ve şunu gir: USERNAME$ sudo npm install -g grunt-cli Sudo ile yapacağımızdan ve sadece yöneticilerin bunu yapmasına izin verildiğinden şifreni girmen istenecektir.
 gruntjs.com

Şimdi NetBeans'i aç ve Tercihler -> HTML / JS -> Grunt'a git, burada Grunt Path'u bulacaksın: bu alanda küresel Grunt kurulumunun bulunduğu konumu gir. Açıklandığı şekilde yapmışsan, bu yol senin için de çalışmalıdır.

/usr/local/bin/gruntGrunt için NetBeans IDE Ayarları

Kaydet / Uygula veya Tamam yada ok, bu kadar. Grunt'ın klasörde olup olmadığını kontrol etmek için Bulucu'nu aç ve "Git" -> "Klasöre Git", burada /bin klasörüne.



Package.json oluştur

Şimdi yeni bir proje oluştur ve kökte böyle görünebilecek package.json adlı bir dosya oluşturursun:


// JS CODE
     0  {  1    "name": "my-project-name",  2    "version": "0.1.0",  3    "devDependencies": {  4      "grunt": "^1.0.1",  5      "grunt-autoprefixer": "^3.x",  6      "grunt-contrib-less": "^1.4.1",  7      "grunt-contrib-uglify": "^2.1.0",  8      "grunt-contrib-watch": "^1.0.0"  9    }  10  } 

    Burada  gruntjs (github) paketleri arayabilirsin ya da burada Composer  packagist.org composer.json için.


    Gruntfile.json oluştur

    Şimdi yeni bir proje oluştur ve kökte böyle görünebilecek Gruntfile.json adlı bir dosya oluşturursun:


    // JS CODE
       0  /**  1   * GRUNT  2   * http://gruntjs.com/getting-started  3   *   4   * @author   Samet Tarim aka prod3v3loper  5   * @link        https://www.tnado.com/  6   *  7   * @param   {type} grunt  8   * @returns {undefined}  9   */  10  module.exports = function (grunt) {  11    12      // Proje yapılandırması  13      grunt.initConfig({  14          pkg: grunt.file.readJSON('package.json'),  15          // Azaltın ve CSS'ye dönüştürün.  16          less: {  17              dist: {  18                  options: {  19                      cleancss: true,  20                      compress: true  21                  },  22                  files: {  23                      "core/css/style.min.css": "core/less/style/style.min.less",  24                  }  25              }  26          },  27          // CSS autoprefixer  28          autoprefixer: {  29              dist: {  30                  files: {  31                      'core/css/style.min.css' : 'core/css/style.min.css'  32                  }  33              }  34          },  35          // JavaScript'i simge durumu küçült  36          uglify: {  37              dist: {  38                  files: {  39                      // Diese Datei ist minimiert, alles was hier drunter im array steht und wird in diese Datei geschrieben   40                      'core/js/_min/front.min.js': [  41                          'core/js/nav.js',  42                          'core/js/mobile.js',  43                      ]  44                  }  45              }  46          },  47          // Değişiklikleri izleyin ve tepki verin  48          watch: {  49              js: {  50                  files: ['<%= uglify.files %>'],  51                  tasks: ['uglify']  52              },  53              less: {  54                  files: ['<%= less.files %>'],  55                  tasks: ['less']  56              },  57              css: {  58                  files: ['<%= autoprefixer.files %>'],  59                  tasks: ['autoprefixer']  60              }  61          }  62      });  63    64      // Yükle modülleri  65      grunt.loadNpmTasks('grunt-contrib-less');  66      grunt.loadNpmTasks('grunt-autoprefixer');  67      grunt.loadNpmTasks('grunt-contrib-uglify');  68      grunt.loadNpmTasks('grunt-contrib-watch');  69      // Standart görevleri kaydet  70      grunt.registerTask('default', ['watch']);  71  }; 


      NPM Yüklemeyi Çalıştır

      Artık, projenizin kök dizininde package.json ve Gruntfile.js'yi oluşturduğunuza göre, şimdi, mouse ile sağdaki düğmeyi kullanarak package.json'u tıklayarak node_modules'ı ekleyebilir, diğerlerinin yanı sıra çeşitli seçenekler içeren bir pencere açabilirsin. npm yükle. Npm kurulumuna tıkla ve node_modules projenize aktarılacaktır. Tabii ki bunu aşağıda açıklandığı gibi konsolda da yapabilirsin.  NPM JS hakkında daha fazla bilgi.



      NetBeans IDE Grunt npm install

      NetBeans'de Grunt kullan

      NetBeans Grunt'ı yetenekli hale getirmek için gereken her şeyi yaptık. Yeni bir proje oluşturduktan sonra Grunt işlevlerine veya Gruntfile.js'ye yüklediğin modüllere erişebilirsin.


      NetBeans IDE Grunt usage

      Gruntfile.js'nizdeki tüm yollar doğruysa, ilgili işlevler en aza indirgenecek, otomatik olarak düzeltilecek, hatta bunları izleyecek ve izleme ile anında değiştirilecektir, bu nedenle tüm yolların Gruntfile.js'ye göre olduğundan emin ol.



      Terminal / Konsol ile NetBeans'te Grunt kullanın

      Veya NetBeans veya NetBeans dışındaki konsol aracılığıyla Grunt'ı kullan. Windows -> IDE Tools -> Console altındaki NetBeans konsolu için aç ve dizininize değiştir:

      USERNAME$ cd /Users/USERNAME/yourproject/

      Ve örneğin, aşağıdakileri gir:

      USERNAME$ npm installya da zaten npm kurulumunu çalıştırdıysanız şimdi grunt ve modülleri kullanınUSERNAME$ grunt uglifyNetBeans IDE Grunt usage

      Your Comment

      * This fields are required, email don't publish
      You can use this tags: <p>, <em>, <strong>, <u>, <s>, <pre>, <blockquote>
      ?

      This field is optional
      Fill this field link your name to your website.

      Data entered in this contact form will be stored in our system to ensure the output of the comment. Your e-mail address will be saved to determine the number of comments and for registration in the future

      Ben bu Privacy policy ve Kullanım Koşulları. I Confirm the submission of the form and the submission of my data.
      tnado SEO & AMP CMS © 2019 | Her hakkı saklıdır
      Created with tnado SEO CMS