14 Mart 2017 Salı

javascript ile kod karmaşıklaştırma

Merhaba,
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