javscript ile geliştirdiğiniz bir projenin yabancı kişiler tarafında okunulabilirliğini azaltmak istiyorsanız aşağıdaki adımları takip ederek bu işlemleri yapabilirsiniz.
projenizin kök dizinde package.json oluşturun.
package.json içeriği aşağıdaki gibi olmalıdır:
{
"name": "sampleapp","version": "1.0.1", "description": "sample app", "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-clean": "^1.0.0", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-uglify": "^0.6.0", "grunt-contrib-watch": "~0.5.3", "load-grunt-tasks": "^1.0.0" } } |
uglify: kodları karmaşıklaştırır
concat : karmaşıklaştırdığınız kodları birleştirirsiniz. Tek dosyada toplayabilirsiniz.
clean: uglify işleminden sonra output dosyalarını silersiniz.
npm install ile package.json da tanımlı dependency leri kurun
#npm install
|
yine kök dizinde gruntfile.js oluşturun. çünkü bu dependency lerle yapacağınız taskları tanımlamanız gerekecek.
gruntfile.js içeriği aşağıdaki şekilde olacaktır:
module.exports = function (grunt) {
grunt.initConfig({pkg: grunt.file.readJSON('package.json'), concat: { concatOperation: { files: [{ "scripts/output/custom.js": ["scripts/custom/custom.js"], }] }, }, uglify: { target: { files: [{ "scripts/output/custom.min.js": ["scripts/output/custom.js"], }] }, options: { mangle: false, }, }, clean : { outputDir : { src : [ "scripts/output/custom.js" ] } } }); grunt.loadNpmTasks("grunt-contrib-concat"); grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask("default", ["concat:concatOperation", "uglify", "clean:outputDir"]); }; |
Son olarak grunt ile taskları çalıştırın
#grunt
|
Bu aşamadan sonra minify ve uglify edilmiş halde "scripts/output/custom.min.js" dosyası oluşacak.
custom.min.js sizin minify ve uglify ettiğiniz javascript dosyalarından oluşacaktır. Artık html sayfanızda bu kodu kullanabilirsiniz