Grunt - ไฟล์ตัวอย่าง

ในบทนี้ให้เราสร้างไฟล์ Grunt ง่ายๆโดยใช้ปลั๊กอินต่อไปนี้ -

• grunt-contrib-uglify
• grunt-contrib-concat
• grunt-contrib-jshint
• grunt-contrib-watch

ติดตั้งปลั๊กอินด้านบนทั้งหมดและทำตามขั้นตอนด้านล่างเพื่อสร้างGruntfile.jsอย่างง่าย-

Step 1- คุณต้องสร้างฟังก์ชันWrapperซึ่งจะสรุปการกำหนดค่าสำหรับ Grunt ของคุณ

module.exports = function(grunt) {};

Step 2 - เริ่มต้นวัตถุการกำหนดค่าของคุณตามที่แสดงด้านล่าง -

grunt.initConfig({});

Step 3- จากนั้นอ่านการตั้งค่าโปรเจ็กต์จากไฟล์package.jsonลงในคุณสมบัติpkg ช่วยให้เราอ้างถึงค่าคุณสมบัติภายในไฟล์package.jsonของคุณ

pkg: grunt.file.readJSON('package.json')

Step 4- ถัดไปคุณสามารถกำหนดการกำหนดค่าสำหรับงานได้ ขอให้เราสร้างงานครั้งแรกของเราconcatเพื่อ concatenate ไฟล์ทั้งหมดที่มีอยู่ในsrc /โฟลเดอร์และเก็บตัดแบ่ง.jsไฟล์ภายใต้อ. /โฟลเดอร์

concat: {
   options: {
      // define a string to insert between files in the concatenated output
      separator: ';'
   },
   dist: {
      // files needs to be concatenated
      src: ['src/**/*.js'],
      // location of the concatenated output JS file
      dest: 'dist/<%= pkg.name %>.js'
   }
}

Step 5- ตอนนี้ให้เราสร้างงานอื่นที่เรียกว่าuglifyเพื่อย่อขนาด JavaScript ของเรา

uglify: {
   options: {
      // banner will be inserted at the top of the output which displays the date and time
      banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
   },
   dist: {
      files: {
         'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
      }
   }
}

งานข้างต้นสร้างไฟล์ภายในโฟลเดอร์dist / ซึ่งมีไฟล์. js ที่ย่อขนาด <%= concat.dist.dest %>จะสั่งทำให้น่าเกลียดที่จะลดขนาดของแฟ้มที่งาน concat สร้าง

Step 6- ให้เรากำหนดค่าปลั๊กอิน JSHint โดยสร้างงานjshint

jshint: {
   // define the files to lint
   files: ['Gruntfile.js', 'src/**/*.js'],
   // configure JSHint
   options: {
      // more options here if you want to override JSHint defaults
      globals: {
         jQuery: true,
      }
   }
}

งานjshintข้างต้นยอมรับอาร์เรย์ของไฟล์และอ็อบเจ็กต์ของอ็อพชัน งานดังกล่าวข้างต้นจะมองหาการละเมิดใด ๆ ในการเข้ารหัสGruntfile.jsและsrc / ** / *. jsไฟล์

Step 7- ต่อไปเรามีงานเฝ้าดูซึ่งค้นหาการเปลี่ยนแปลงในไฟล์ใด ๆ ที่ระบุและเรียกใช้งานที่คุณระบุ

watch: {
   files: ['<%= jshint.files %>'],
   tasks: ['jshint']
}

Step 8- ต่อไปเราต้องโหลดปลั๊กอินฮึดฮัดซึ่งทั้งหมดได้รับการติดตั้งผ่าน_npm

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

Step 9- สุดท้ายเราต้องกำหนดงานเริ่มต้น

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

เริ่มต้นงานสามารถทำงานได้โดยเพียงแค่พิมพ์แสมคำสั่งในบรรทัดคำสั่ง

นี่คือGruntfile.js ที่สมบูรณ์ของคุณ-

module.exports = function(grunt) {

   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      concat: {
         options: {
            separator: ';'
         },
         dist: {
            src: ['src/**/*.js'],
            dest: 'dist/<%= pkg.name %>.js'
         }
      },
      uglify: {
         options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today() %> */\n'
         },
         dist: {
            files: {
               'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
            }
         }
      },
      jshint: {
         // define the files to lint
         files: ['Gruntfile.js', 'src/**/*.js'],
         // configure JSHint
         options: {
            // more options here if you want to override JSHint defaults
            globals: {
               jQuery: true,
            }
         }
      },
      watch: {
         files: ['<%= jshint.files %>'],
         tasks: ['jshint']
      }
   });

   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-concat');

   grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};