গ্রান্ট.জেএস (0.3.x) এর সাথে একাধিক সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি কীভাবে সংযুক্ত করা এবং মাইনাইফাই করা যায়

Question 1

দ্রষ্টব্য: এই প্রশ্নটি কেবল গ্রান্ট 0.3.x এর জন্য প্রাসঙ্গিক এবং রেফারেন্সের জন্য রেখে দেওয়া হয়েছে। সর্বশেষতম গ্রান্ট 1.x প্রকাশে সহায়তার জন্য দয়া করে এই প্রশ্নের নীচে আমার মন্তব্য দেখুন।

আমি বর্তমানে গ্রান্ট.জেএস ব্যবহার করার চেষ্টা করছি প্রথমে কনটেনেটেটিংয়ের জন্য এবং তারপরে সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি মিনিফাইং করার জন্য একটি স্বয়ংক্রিয় বিল্ড প্রক্রিয়া সেটআপ করার জন্য।

আমি আমার জাভাস্ক্রিপ্ট ফাইলগুলি সাফল্যের সাথে একত্রীকরণ এবং মাইনাইফাই করতে সক্ষম হয়েছি, যদিও প্রতিবারই আমি দৃ run়ভাবে চালনা করি তবে মনে হয় এটি ওভাররাইটিংয়ের পরিবর্তে কেবলমাত্র ফাইলটিতে যুক্ত হয়।

মাইনিফিং বা এমনকি কনসেন্টেটিং সিএসএসের হিসাবে, আমি এখনও এটি করতে অক্ষম হয়েছি!

ঘোঁৎ ঘোঁৎ সিএসএস মডিউল নিরিখে আমি ব্যবহার চেষ্টা করেছি consolidate-css, grunt-cssও cssminকিন্তু কোন উপকার। এগুলি কীভাবে ব্যবহার করতে হয় তা সম্পর্কে মাথা পেতে পারি না!

আমার ডিরেক্টরি কাঠামোটি নিম্নরূপ (একটি সাধারণ নোড.জেএস অ্যাপ্লিকেশন হওয়া):

app.js
গ্রান্ট.জেএস
/public/index.html
/ পাবলিক / সিএসএস / [বিভিন্ন সিএসএস ফাইল]
/ সর্বজনীন / জেএস / [বিভিন্ন জাভাস্ক্রিপ্ট ফাইল]

আমার অ্যাপ্লিকেশনটির মূল ফোল্ডারে বর্তমানে আমার গ্রান্ট.জেএস ফাইলটি দেখতে দেখতে এখানে রয়েছে:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

সুতরাং কেবল সংক্ষেপে বলতে গেলে আমার দুটি প্রশ্নের সাহায্য দরকার:

ফোল্ডারের অধীনে আমার সমস্ত সিএসএস ফাইলকে কীভাবে /public/css/এক ফাইলে সংযুক্ত করতে এবং মাইনিফাই করতে হয় , বলুনmain.min.css
কেন grunt.js ঘনিভূত এবং minified জাভাস্ক্রিপ্ট ফাইল সংযোজন উপর রাখে concat.jsএবং concat.min.jsঅধীনে /public/js/পরিবর্তে তাদের প্রতিটি সময় কমান্ড মুছে যাওয়ার gruntচালানো হয়?

জুলাই 2016 এর 5 তম আপডেট হয়েছে - গ্রান্ট 0.3.x থেকে গ্রান্ট 0.4.x বা 1.x এ আপগ্রেড করা হয়েছে

Grunt.jsএকটি নতুন কাঠামোতে স্থানান্তরিত হয়েছে Grunt 0.4.x(ফাইলটি এখন বলা হয় Gruntfile.js)। এর জন্য একটি বিল্ড প্রক্রিয়া স্থাপনের জন্য সহায়তার জন্য দয়া করে আমার ওপেন সোর্স প্রকল্প গ্রান্ট.জেএস স্কেলটন দেখুনGrunt 1.x ।

থেকে সরানো অনেক বড় পরিবর্তনগুলি প্রবর্তনGrunt 0.4.x করা Grunt 1.x উচিত নয় ।

Question 2

concat.js কার্যের concatউত্স ফাইলগুলিতে অন্তর্ভুক্ত করা হচ্ছে public/js/*.js। আপনার কাছে এমন একটি কাজ থাকতে পারে যা concat.jsপুনরায় যুক্ত হওয়ার আগে মুছে ফেলা (যদি ফাইলটি উপস্থিত থাকে), আপনি কোন ফাইলগুলি এবং তাদের অর্ডার করতে চান তা পরিষ্কারভাবে সংজ্ঞায়িত করতে একটি অ্যারে পাস করুন বা আপনার প্রকল্পের কাঠামো পরিবর্তন করুন।

যদি পরে কাজ করে থাকেন তবে আপনি আপনার সমস্ত উত্স ./srcএবং আপনার নির্মিত ফাইলগুলি নীচে রাখতে পারেন./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

তারপরে আপনার কনক্যাট টাস্কটি সেট আপ করুন

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

আপনার ন্যূনতম কাজ

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

বিল্ট -ইন মিনিট টাস্কটি ইউগ্লিফাইজেএস ব্যবহার করে, সুতরাং আপনার প্রতিস্থাপনের প্রয়োজন। আমি গ্রান্ট-সিএসএস দেখতে পেয়েছি বেশ ভাল। এটি ইনস্টল করার পরে, এটি আপনার গ্রুর্ট ফাইলটিতে লোড করুন

grunt.loadNpmTasks('grunt-css');

এবং তারপর এটি সেট আপ

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

লক্ষ্য করুন যে ব্যবহারটি অন্তর্নির্মিত মিনিটের মতো।

আপনার defaultকাজটি এতে পরিবর্তন করুন

grunt.registerTask('default', 'concat min cssmin');

এখন, দৌড়ানো আপনার gruntপছন্দসই ফলাফল আনবে produce

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

Question 3

আমি এখানে একটি খুব, খুব, আকর্ষণীয় কৌশল উল্লেখ করতে চাই যা জ্যাকুয়ারি এবং মডার্নিজারের মতো বিশাল প্রকল্পগুলিতে ব্যবহারযোগ্য জিনিসগুলির জন্য ব্যবহৃত হচ্ছে।

এই প্রকল্পগুলি উভয়ই সম্পূর্ণরূপে প্রয়োজনীয় জেএস মডিউলগুলি দ্বারা বিকাশ করা হয়েছে (আপনি তাদের গিথুব রেপোতে দেখতে পাচ্ছেন) এবং তারপরে তারা প্রয়োজনীয় স্মার্ট কনটেইনেটর হিসাবে প্রয়োজনীয়তা অপ্টিমাইজার ব্যবহার করে। মজার বিষয়টি হ'ল, আপনি যেমন দেখতে পাচ্ছেন, না jQuery না মডার্নজারকে কাজ করার প্রয়োজনের প্রয়োজন হয় এবং এটি ঘটে কারণ তারা তাদের কোডে প্রয়োজনীয়তাগুলি থেকে মুক্তি পেতে প্রয়োজনীয়তাগুলি সিনট্যাটিক আচারটি মুছে ফেলে। সুতরাং তারা একটি স্ট্যান্ড্যালোন লাইব্রেরি দিয়ে শেষ করে যা প্রয়োজনীয়js মডিউলগুলির সাথে বিকাশ করা হয়েছিল! এটিকে ধন্যবাদ তারা অন্যান্য সুবিধার মধ্যে তাদের লাইব্রেরির খাঁটি বিল্ড সম্পাদন করতে সক্ষম।

প্রয়োজনীয়js অপ্টিমাইজারের সাথে জড়িতদের আগ্রহী সকলের জন্য, এই পোস্টটি দেখুন

এছাড়াও একটি ছোট সরঞ্জাম রয়েছে যা প্রক্রিয়াটির সমস্ত বয়লারপ্লেট বিমূর্ত করে: আলবানিলজেএস

Question 4

আমি উপরের উত্তরের সাথে একমত তবে এখানে সিএসএস সংক্ষেপণের আরেকটি উপায়।

আপনি YUI সংক্ষেপক ব্যবহার করে আপনার সিএসএস সংহত করতে পারেন :

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
};

Question 5

আপনার কনক্যাট প্যাকেজ যুক্ত করার দরকার নেই, আপনি এটি এইভাবে সিএসমিনের মাধ্যমে করতে পারেন:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

এবং জেএসের জন্য, এইভাবে uglify ব্যবহার করুন:

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }

Question 6

আমি মনে করি যে আরও বেশি স্বয়ংক্রিয় হতে পারে, উদ্বেগজনক কাজ ব্যবহারকারীর আপনার জন্য এই সমস্ত কাজ করার জন্য যত্ন নিন, কেবল কিছু কনফিগারেশন প্রয়োজন:

https://stackoverflow.com/a/33481683/1897196