您好,登錄后才能下訂單哦!
一、contrib-concat 和 contrib-uglify 插件的聯(lián)合使用
1、安裝 concat 和 uglify 插件命令(在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行)
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
2、在項(xiàng)目根目錄下提供 concat 和 uglify 插件任務(wù)配置需要的 src 目錄和需要被合并的源文件(合并源文件放置到 src 目錄下)
mkdir src
3、在 Gruntfile.js 文件中對(duì) concat 和 uglify 任務(wù)進(jìn)行配置(把多個(gè)文件合并成一個(gè)文件并且進(jìn)行壓縮)
// 包裝函數(shù)
module.exports = function (grunt) {
// 任務(wù)配置,所有插件的配置信息
grunt.initConfig({
// 獲取 package.json 的信息
pkg: grunt.file.readJSON('package.json'),
// concat 插件的配置信息
concat: {
options: {
separator: ';', // 設(shè)置輸出文件合并的字符
banner: '/*被合成的文件第一行內(nèi)容說明文字信息*/',
footer: '/*被合成的文件尾部?jī)?nèi)容說明文字信息*/',
stripBanners: true // 去掉被合成的文件內(nèi)容中的 /* */ 注釋信息
},
// 具體任務(wù)配置
dist: {
// 被合并的文件路徑
src: ['src/zepto.js','src/jquery.js'],
// 被合成的文件路徑
dest: 'dest/libs.js'
}
},
// uglify 插件的配置信息
uglify: {
// 文件頭部輸出信息
options: {
banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
// 具體任務(wù)配置
build: {
// 源文件
src: 'dest/libs.js',
// 目標(biāo)文件
dest: 'dest/libs.min.js'
}
}
});
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['concat','uglify']);
};
PS:當(dāng)你在命令行中執(zhí)行 grunt 命令本身時(shí),Grunt 就會(huì)尋找一個(gè)已注冊(cè)的任務(wù),叫作default。當(dāng)然我們也可以自定義一個(gè)任務(wù),將執(zhí)行一個(gè)特定的任務(wù)集,注意任務(wù)集中的插件的排列有先后之分,越靠前越先執(zhí)行。例如,grunt.registerTask('release',['jshint', 'jasmine', 'requirejs', 'sass', 'p_w_picpathmin', 'htmlmin']); 我們已經(jīng)創(chuàng)建了一個(gè) release 任務(wù),在命令行使用 " grunt release " 命令運(yùn)行時(shí)將把我們準(zhǔn)備好的文件提交到我們的生產(chǎn)環(huán)境中。
4、最后在終端運(yùn)行 grunt 命令
PS:如果提示 "Done, without errors." 證明就沒什么問題了,現(xiàn)在去項(xiàng)目根目錄下看是否已經(jīng)生成了存放合并文件的目錄和被合成之后進(jìn)行壓縮的目標(biāo)文件。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。