Bermula dengan kemahiran Grunt (pelari tugas automatik)_javascript

Semasa proses pembangunan Javascript, anda sering menghadapi beberapa tugasan berulang, seperti menggabungkan fail, memampatkan kod, menyemak ralat tatabahasa, menukar kod Sass kepada kod CSS, dsb. Biasanya, kita perlu menggunakan alat yang berbeza untuk menyelesaikan tugasan yang berbeza, iaitu kerja yang berulang-ulang dan sangat memakan masa. Grunt ialah alat yang dicipta untuk menyelesaikan masalah ini, yang boleh membantu kami mengurus dan menjalankan pelbagai tugas secara automatik.

Ringkasnya, Grunt ialah pelari tugas automatik yang menjalankan satu siri tugasan secara automatik dalam susunan pratetap. Ini memperkemas aliran kerja dan mengurangkan beban tugasan yang berulang.

## Pasang

Grunt adalah berdasarkan Node.js Sebelum pemasangan, anda mesti memasang Node.js dahulu, dan kemudian jalankan arahan berikut.

sudo npm install grunt-cli -g

grunt-cli menunjukkan bahawa antara muka baris arahan grunt dipasang, dan parameter g menunjukkan pemasangan global.

Grunt menggunakan struktur modul Selain memasang antara muka baris arahan, anda juga mesti memasang modul yang sepadan seperti yang diperlukan. Modul ini harus dipasang secara tempatan, kerana projek yang berbeza mungkin memerlukan versi yang berbeza bagi modul yang sama.

Mula-mula, cipta fail teks package.json dalam direktori akar projek untuk menentukan modul yang diperlukan oleh projek semasa. Berikut adalah contoh.

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: “<em>“, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }</em>

Dalam fail package.json di atas, selain daripada menunjukkan nama dan versi projek, modul grunt dan versi yang bergantung kepada projek juga dinyatakan dalam atribut devDependencies: modul teras grunt ialah versi terkini 0.x.x dan pemalam jshint ialah versi terkini Pemalam concat tidak lebih rendah daripada versi 0.1.1, pemalam uglify tidak lebih rendah daripada versi 0.1.0 dan pemalam jam tangan tidak lebih rendah daripada versi 0.1 .4.

Kemudian, jalankan arahan berikut dalam direktori akar projek, dan pemalam ini akan dipasang secara automatik dalam subdirektori node_modules.

npm install

Kaedah di atas adalah untuk situasi di mana package.json sudah wujud. Jika anda ingin menjana fail package.json secara automatik, anda boleh menggunakan arahan npm init dan ikut gesaan pada skrin untuk menjawab nama dan versi modul yang diperlukan.

npm init

Jika fail package.json sedia ada tidak termasuk modul Grunt, anda boleh menambah parameter --save-dev apabila memasang modul Grunt secara terus dan modul tersebut akan ditambahkan secara automatik pada fail package.json.

npm install <module> —save-dev

Sebagai contoh, sepadan dengan modul yang dinyatakan dalam fail package.json di atas, anda perlu menjalankan perintah npm berikut.

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## Fail skrip arahan Gruntfile.js

Selepas modul dipasang, langkah seterusnya ialah mencipta fail skrip baharu Gruntfile.js dalam direktori akar projek. Ia ialah fail konfigurasi untuk grunt, sama seperti package.json ialah fail konfigurasi untuk npm. Gruntfile.js ialah cara modul Node.js umum ditulis.

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 <em>/ }, concat: { /</em> concat的参数 <em>/ }, uglify: { /</em> uglify的参数 <em>/ }, watch: { /</em> watch的参数 <em>/ } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };</em>

Kod di atas menggunakan tiga kaedah kod grunt: grunt.initConfig: mentakrifkan parameter pelbagai modul dan setiap item ahli sepadan dengan modul dengan nama yang sama.
grunt.loadNpmTasks: Muatkan modul yang diperlukan untuk menyelesaikan tugasan. grunt.registerTask: Tentukan tugas tertentu. Parameter pertama ialah nama tugas, dan parameter kedua ialah tatasusunan yang menunjukkan modul yang perlu digunakan oleh tugasan dalam urutan. Nama tugas lalai menunjukkan modul yang akan dipanggil (jshint, concat dan uglify dalam contoh ini) jika arahan grunt dimasukkan terus tanpa sebarang parameter, tugas semak dalam contoh ini menunjukkan penggunaan pemalam jshint untuk melakukan semakan sintaks pada kod.
Kod di atas memuatkan sejumlah empat modul: jshint (menyemak ralat sintaks), concat (menggabungkan fail), uglify (memampatkan kod) dan menonton (pelaksanaan automatik). Seterusnya, terdapat dua cara untuk menggunakannya.

(1) Jalankan modul tertentu daripada baris arahan, seperti

grunt jshint

Kod di atas menunjukkan menjalankan modul jshint.

(2) Baris arahan melaksanakan tugas tertentu. Contohnya

grunt check

Kod di atas menunjukkan menjalankan tugas semak. Jika operasi berjaya, "Selesai, tanpa ralat."

Jika tiada nama tugas diberikan, hanya menaip grunt akan melaksanakan tugas lalai.

## Contoh Gruntfile.js: modul grunt-contrib-cssmin

Berikut menggunakan modul cssmin untuk menunjukkan cara menulis fail Gruntfile.js. Modul cssmin digunakan untuk meminimumkan fail CSS.

Mula-mula, pasang modul dalam direktori akar projek anda.

npm install grunt-contrib-cssmin —save-dev

Kemudian, buat fail baharu Gruntfile.js.

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘<em>.css', ‘!</em>.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

Tiga kaedah dalam kod di atas diterangkan secara terperinci di bawah, dan kami akan melihatnya satu demi satu.

(1)grunt.initConfig

Kaedah grunt.initConfig digunakan untuk konfigurasi modul dan ia menerima objek sebagai parameter. Ahli objek ini sepadan dengan modul dengan nama yang sama yang digunakan. Oleh kerana kami sedang mengkonfigurasi modul cssmin, terdapat ahli cssmin (harta benda) di dalamnya.

cssmin (property) menunjuk ke objek yang mengandungi berbilang ahli. Sebagai tambahan kepada beberapa ahli set sistem (seperti pilihan), ahli tersuai lain dipanggil sasaran. Modul boleh mempunyai berbilang sasaran Dalam kod di atas, modul cssmin mempunyai dua sasaran Satu ialah "minify", yang digunakan untuk memampatkan fail css, yang digunakan untuk menggabungkan berbilang fail css dokumen.

Untuk tetapan khusus bagi setiap sasaran, anda perlu merujuk kepada dokumentasi templat. Setakat cssmin, maksud khusus parameter sasaran minify adalah seperti berikut:

kembangkan: Jika ditetapkan kepada benar, ini bermakna pemegang tempat nama fail berikut (iaitu, nombor ) mesti dikembangkan menjadi nama fail tertentu.
cwd: Direktori tempat fail (input) yang akan diproses berada. src: Menunjukkan fail yang perlu diproses. Jika ia dalam bentuk tatasusunan, setiap item dalam tatasusunan ialah nama fail dan kad bebas boleh digunakan.
dest: Menunjukkan nama fail atau direktori yang diproses. ext: mewakili nama akhiran fail yang diproses.
Sebagai tambahan kepada parameter di atas, terdapat juga beberapa parameter yang biasa kepada semua modul grunt.

penapis: Fungsi yang mengembalikan nilai Boolean untuk menapis nama fail. Hanya fail dengan nilai pulangan true akan diproses oleh grunt. titik: Sama ada untuk memadankan fail sistem bermula dengan noktah (.).
makeBase: Jika ditetapkan kepada benar, hanya bahagian terakhir laluan fail akan dipadankan. Contohnya, a?b boleh memadankan /xyz/123/acb tetapi bukan /xyz/acb/123.
Mengenai kad bebas, maksudnya adalah seperti berikut: : Padan dengan sebarang bilangan aksara, tidak termasuk /. ?: Padan dengan satu aksara, tidak termasuk /.
**: Memadankan sebarang bilangan aksara, termasuk /. {}: Senarai dipisahkan koma dibenarkan, menunjukkan perhubungan "atau" (atau).
!: digunakan pada permulaan corak, menunjukkan bahawa hanya kes yang tidak sepadan akan dikembalikan.
Contohnya, foo/.js sepadan dengan fail di bawah direktori foo yang namanya berakhir dengan .js dan foo//.js sepadan dengan fail di bawah direktori foo dan semua subdirektorinya yang namanya berakhir dengan . js. Fail yang berakhir dengan !.css bermaksud memadankan semua fail dengan akhiran selain daripada ".css".

Lebih banyak contoh menggunakan kad bebas untuk menetapkan atribut src:
(2)grunt.loadNpmTasks

Kaedah grunt.loadNpmTasks memuatkan fail modul. (3)grunt.registerTask

Kaedah grunt.registerTask mentakrifkan cara memanggil tugas tertentu. Tugas "lalai" bermakna jika tiada parameter disediakan dan arahan grunt dimasukkan secara langsung, "cssmin:minify" akan dijalankan dahulu, dan kemudian "cssmin:combine" akan dijalankan, iaitu, pemampatan akan dilakukan terlebih dahulu dan kemudian digabungkan. Jika anda hanya melakukan pemampatan atau hanya bergabung, anda perlu menentukan "nama modul: nama sasaran" selepas arahan mendengus.
rungut-contri-bersih: Padamkan fail.
* grunt-contrib-compass: Gunakan kompas untuk menyusun fail sass.
* grunt-contrib-concat: Satukan fail.
* rungut-contri-copy: Salin fail.
* grunt-contrib-cssmin: Mampatkan dan gabungkan fail CSS.
* grunt-contrib-imagemin: Modul pemampatan imej.
* grunt-contrib-jshint: Semak sintaks JavaScript.
* grunt-contrib-uglify: Mampatkan dan gabungkan fail JavaScript.
* mendengus-contri-watch: Pantau perubahan fail dan ambil tindakan yang sepadan.
Jika awalan modul adalah grunt-contrib, ini bermakna modul tersebut dikekalkan oleh pasukan pembangunan grunt jika awalan adalah grunt (seperti grunt-pakmanager), ia bermakna ia diselenggara oleh pihak ketiga; pemaju.

Pilih beberapa modul di bawah untuk melihat cara parameter konfigurasi mereka ditulis, iaitu, cara mengkonfigurasi setiap modul dalam kaedah grunt.initConfig.

### grunt-contrib-jshint

jshint digunakan untuk menyemak ralat sintaks, seperti sama ada penggunaan koma bertitik adalah betul, sama ada anda terlupa menulis kurungan, dsb. Kod konfigurasinya dalam kaedah grunt.initConfig adalah seperti berikut.
/.js'] },

Kod di atas mula-mula menentukan item semak jshint eqeqeq bermakna pengendali kesamarataan harus digantikan dengan pengendali kesaksamaan yang ketat, dan mengekori bermakna tiada ruang tambahan di hujung baris. Kemudian, nyatakan atribut fail, menunjukkan bahawa sasaran semak ialah fail Gruntfile.js dan fail JavaScript dalam semua subdirektori direktori lib.

### dengusan-contrib-concat

concat digunakan untuk menggabungkan fail yang serupa Ia bukan sahaja boleh menggabungkan fail JavaScript, tetapi juga fail CSS.
.js', dest : ‘js/‘ } },

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/<em>‘, dest: ‘dest/‘, }, },</em>

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: { files: ‘<strong>/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘</strong>/<em>.sass', tasks: [‘sass'], options: { livereload: true, }, }, },</em>

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

### 其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘<em>‘ } } }</em>

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th<em>.js'}grunt-contrib-uglify {src: ‘foo/{a,b}</em>.js'} {src: [‘foo/a<em>.js', ‘foo/b</em>.js']}

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

 grunt.initConfig({ cssmin: { options: { /<em> … </em>/ }, minify: { /<em> … </em>/ }, combine: { /<em> … </em>/ } } });

grunt # 默认情况下，先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/

## 参考链接

• Frederic Hemberger, Alat binaan untuk projek hadapan
• Mária Jurčovičová, Membina Perpustakaan JavaScript dengan Grunt.js
• Ben Briggs，Percepatkan Aliran Kerja Pembangunan Web Anda dengan Grunt
• Mengoptimumkan Imej Dengan Dengusan
• Swapnil Mishra, Memudahkan Kerja-kerja dengan Dengusan
• AJ ONeal, Berpindah ke GruntJS
• Dokumentasi Dengusan, Mengkonfigurasi tugas
• Landon Schropp, Menulis Skrip Binaan Hebat dengan Grunt
• Mike Cunsolo, Bangun Dan Berlari Dengan Dengusan
• Matt Bailey, A Beginner's Guide to Using Grunt With Magento
  转自：http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐：http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

### grunt-contrib-uglify

uglify模块用来压缩代码，减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘