GruntJS Kurulumu Yapmak 2

tarihinde gönderilmiş tarafından

Merhaba,

Bu yazıda GruntJS kurulumuyla ilgili aktardığım bilgiye kaldığımız yerden devam edeceğim. Önceki yazıyı okumamış olanlar, ilgili yazıya buradan ulaşabilirler.

package.json

package.json dosyası Gruntfile gibi projenizin root klasöründe barındrılmalıdır, ve proje kaynak kodlarınızla birlikte commit edilmelidir. npm install komutunu aynı klasörde kullanmak package.json dosyasında olduğu gibi doğru sürümdeki aynı bağlılıkların yüklenmesine sebep olacaktır.

Projenizde package.json dosyası oluşturmak için birkaç yöntem mevcuttur:

  • Birçok grunt-init template’i otomatik olarak package.json dosyasını oluşturacaktır.
  • npm init komutu temel bir package.json dosyası oluşturacaktır.
  • Aşağıdaki örnekle başlayın ve buradaki spesifikasyonları takip ederek ihtiyaç oldukça geliştirin.

{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}

Grunt ve Grunt Eklentilerini Yüklemek

Var olan bir package.json dosyasına Grunt ve Grunt eklentilerini yüklemenin en kolay yolu şu komutu çalıştırmaktır:

npm install --save-dev.

Bu komut sadece lokal olarak yüklemeyecek, ayrıca otomatik olarak devDependencies bölümüne uzun versiyon aralığını kullanarak eklenecektir.
Örneğin, aşağıdaki komut proje klasörünüzde en son Grunt sürümünü yükleyecek ve devDependencies bölümüne Grunt ekleyecektir.

npm install grunt --save-dev

Aynı işlem gruntplugins ve diğer node modülleri için de yapılabilir. Aşağıdaki örnekte görüldüğü gibi JSHint görev modülünü yüklemek:

npm install grunt-contrib-jshint --save-dev

komutuyla gerçekleştirilebilir.

Eklentiler sayfasında güncel yükleyebileceğniz ve projenizde kullanabileceğiniz gruntpluginlere göz atın.
İşiniz bittiğinde güncellenmiş package.json dosyasını commit ettiğinize emin olun.

Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

Bir Gruntfile dosyası aşağıdaki bölümlerden oluşur:

“wrapper” fonksiyonu
Proje ve görev konfigürasyonu
Yüklenen Grunt eklentileri ve görevleri
Rastgele görevler

Örnek Gruntfile

In the following Gruntfile, project metadata is imported into the Grunt config from the project’s package.json file and the grunt-contrib-uglify plugin’s uglify task is configured to minify a source file and generate a banner comment dynamically using that metadata. When grunt is run on the command line, the uglify task will be run by default.

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today(“yyyy-mm-dd”) %> */\n’
},
build: {
src: ‘src/<%= pkg.name %>.js’,
dest: ‘build/<%= pkg.name %>.min.js’
}
}
});

// Load the plugin that provides the “uglify” task.
grunt.loadNpmTasks(‘grunt-contrib-uglify’);

// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);

};

Now that you’ve seen the whole Gruntfile, let’s look at its component parts.

“wrapper” fonksiyonu

Every Gruntfile (and gruntplugin) uses this basic format, and all of your Grunt code must be specified inside this function:

module.exports = function(grunt) {
// Do grunt-related things in here
};

Proje ve görev konfigürasyonu

Most Grunt tasks rely on configuration data defined in an object passed to the grunt.initConfig method.

In this example, grunt.file.readJSON(‘package.json’) imports the JSON metadata stored in package.json into the grunt config. Because <% %> template strings may reference any config properties, configuration data like filepaths and file lists may be specified this way to reduce repetition.

You may store any arbitrary data inside of the configuration object, and as long as it doesn’t conflict with properties your tasks require, it will be otherwise ignored. Also, because this is JavaScript, you’re not limited to JSON; you may use any valid JS here. You can even programmatically generate the configuration if necessary.

Like most tasks, the grunt-contrib-uglify plugin’s uglify task expects its configuration to be specified in a property of the same name. Here, the banner option is specified, along with a single uglify target named build that minifies a single source file to a single destination file.

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

Loading Grunt plugins and tasks

Many commonly used tasks like concatenation, minification and linting are available as grunt plugins. As long as a plugin is specified in package.json as a dependency, and has been installed via npm install, it may be enabled inside your Gruntfile with a simple command:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

Note: the grunt –help command will list all available tasks.

Rastgele görevler

You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task. This is functionally the same as explicitly running grunt uglify or even grunt default. Any number of tasks (with or without arguments) may be specified in the array.

// Default task(s).
grunt.registerTask('default', ['uglify']);

If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside the Gruntfile. For example, this Gruntfile defines a completely custom default task that doesn’t even utilize task configuration:

module.exports = function(grunt) {

// A very basic default task.
grunt.registerTask(‘default’, ‘Log some stuff.’, function() {
grunt.log.write(‘Logging some stuff…’).ok();
});

};

Custom project-specific tasks don’t need to be defined in the Gruntfile; they may be defined in external .js files and loaded via the grunt.loadTasks method.

Daha Fazlası

The Installing grunt guide has detailed information about installing specific, production or in-development, versions of Grunt and grunt-cli.
The Configuring Tasks guide has an in-depth explanation on how to configure tasks, targets, options and files inside the Gruntfile, along with an explanation of templates, globbing patterns and importing external data.
The Creating Tasks guide lists the differences between the types of Grunt tasks and shows a number of sample tasks and configurations.
For more information about writing custom tasks or Grunt plugins, check out the developer documentation.