Netbeans Grunt'a entegre olabilirsiniz, böylece adanmış yüzeylerde veya konsol üzerinden servis yapılabilir ve burada nasıl uygulanacağını adım adım öğreneceksiniz.
Grunt JS ile yapabilecekleriniz NetBeans ile kendiniz yapabilseniz de, SASS veya LESS dosyalarınızı CSS'ye dönüştürün ve sıkıştırın. Ancak en iyi avantajlardan biri, SASS veya LESS kadar kolay olmayacak olan JavaScript dosyalarını da sıkıştırabilmenizdir.
Netbeans geliştiricileri bunun için yüzeyler sağladığı için sürüm önemli değil ve hemen hemen herkes için çalışmalı. Şimdi başlayalım çünkü uzun metinler durmadığında ve maddi ya da somut hiçbir şey izlemeyecekken kendimden hoşlanmıyorum;).
Geçerli sürümüm ve nerede denediğim:
8.0 - Apache Netbeans IDE 8.0
8.1 - Apache Netbeans IDE 8.1
8.2 - Apache Netbeans IDE 8.2 Mevcut sürümüm
Grunt, mevcut projelerin parçalarını işlemesi için çok uygundur. Ya da küçük projeler için çok uygun, ancak ağırlıklı olarak Webpack ve diğer koordinatörler var.
Netbeans ve Grunt için neler gerekli?
Ipucu
Adres çubuğuna cmd yazıp Enter tuşuna basın
Klasördeki boş bir noktaya sağ tıklarken Shift tuşunu basılı tutun ve Komut Penceresini Burada Aç'ı seçin.
Öncelikle NetBeans'a ihtiyacımız var, bu yüzden NetBeans'ı indirip yükleyin:
Apache Netbeans IDE
Ardından sisteminize Node.js yükleyin ve kurun:
Node JS.
Ve şimdi hala ihtiyacımız var Grunt ve ayrıca global olarak yüklüyoruz, böylece sisteminizdeki diğer projeler için kullanabilirsiniz. Grunt hakkında daha fazla bilgi istemediğiniz sürece bu sayfayı ziyaret etmeniz gerekmez. Düğüm Paket Yöneticisi'ni zaten kurduk ve bununla Grunt'u yüklüyoruz.
Grunt JS
Terminalinizi açın ve Node Package Manager ile kurmak için aşağıdakileri girin:
USERNAME$ sudo npm install -g grunt-cliŞifrenizi sudo ile yapacağımızdan ve sadece yöneticilerin girmesine izin verildiğinden şifreni girmeniz istenecek. -G global anlamına gelir, kurulumdan sonra Grunt'u şimdiden kullanabilirsiniz.
Şifrenizi sudo ile yapacağımızdan ve sadece yöneticilerin girmesine izin verildiğinden şifreni girmeniz istenecek. -G global anlamına gelir, kurulumdan sonra Grunt'u şimdiden kullanabilirsiniz.
/usr/local/bin/grunt
Kaydet / Uygula veya Tamam ve bu olmalıdır. Grunt'un klasörde gerçekten olup olmadığını kontrol etmek için Finder'ınızı açın ve sekmenin en üstünde "Git" -> "Klasöre Git" e gidin, orada her şeyi / usr / local / bin klasörüne getirin. / Usr / local / bin klasöründe Grunt'u bulmalısınız.
Ipucu
Üst kısmı yaptıktan ve sonra NetBeans içinde yeni bir proje oluşturduktan sonra Gruntfile.js ve package.js "Önemli Dosyalar" klasöründe olmalıdır. Bunları doğrudan kullanabilirsiniz; kütüphaneler "npm Kütüphaneler" de olacaktır.
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:
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:
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 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'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.
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 uglify
Reklam