摘要:介紹中文主頁是一套前端自動化構(gòu)建工具,一個基于的命令行工具它是一個任務(wù)運(yùn)行器配合其豐富強(qiáng)大的插件常用功能合并文件壓縮文件語法檢查預(yù)編譯處理其它安裝查看版本創(chuàng)建一個簡單的應(yīng)用構(gòu)建生成的文件所在的文件夾
Grunt介紹
中文主頁 : http://www.gruntjs.net/
是一套前端自動化構(gòu)建工具,一個基于nodeJs的命令行工具
它是一個任務(wù)運(yùn)行器, 配合其豐富強(qiáng)大的插件
常用功能:
合并文件(js/css)
壓縮文件(js/css)
語法檢查(js)
less/sass預(yù)編譯處理
其它...
安裝nodejs, 查看版本
node -v
創(chuàng)建一個簡單的應(yīng)用grunt_test
|- build----------構(gòu)建生成的文件所在的文件夾 |- src------------源碼文件夾 |- js---------------js源文件夾 |- css--------------css源文件夾 |- index.html-----頁面文件 |- Gruntfile.js---grunt配置文件(注意首字母大寫) |- package.json---項目包配置文件 { "name": "grunt_test", "version": "1.0.0" }
全局安裝 grunt-cli
npm install -g grunt-cli
安裝grunt
npm install grunt --save-dev
運(yùn)行構(gòu)建項目命令
grunt //提示 Warning: Task "default" not found
配置文件: Gruntfile.js
此配置文件本質(zhì)就是一個node函數(shù)類型模塊
配置編碼包含3步:
初始化插件配置
加載插件任務(wù)
注冊構(gòu)建任務(wù)
基本編碼:
module.exports = function(grunt){ // 1. 初始化插件配置 grunt.initConfig({ //主要編碼處 }); // 2. 加載插件任務(wù) // grunt.loadNpmTasks("grunt-contrib-concat"); // 3. 注冊構(gòu)建任務(wù) grunt.registerTask("default", []); };
命令: grunt //提示成功, 但沒有任何效果(還沒有使用插件定義任務(wù))
Grunt插件介紹
grunt官網(wǎng)的插件列表頁面 http://www.gruntjs.net/plugins
插件分類:
grunt團(tuán)隊貢獻(xiàn)的插件 : 插件名大都以contrib-開頭
第三方提供的插件 : 大都不以contrib-開頭
常用的插件:
grunt-contrib-clean——清除文件(打包處理生成的)
grunt-contrib-concat——合并多個文件的代碼到一個文件中
grunt-contrib-uglify——壓縮js文件
grunt-contrib-jshint——javascript語法錯誤檢查;
grunt-contrib-cssmin——壓縮/合并css文件
grunt-contrib-htmlmin——壓縮html文件
grunt-contrib-imagemin——壓縮圖片文件(無損)
grunt-contrib-copy——復(fù)制文件、文件夾
grunt-contrib-requirejs——合并壓縮requirejs管理的所有js模塊文件
grunt-contrib-watch——實時監(jiān)控文件變化、調(diào)用相應(yīng)的任務(wù)重新執(zhí)行
合并js: 使用concat插件
命令:
npm install grunt-contrib-concat --save-dev
編碼:
src/js/test1.js
(function () { function add(num1, num2) { return num1 + num2; } console.log(add(10, 20)); })();
src/js/test2.js
(function () { var arr = [2,3,4].map(function (item, index) { return item+1; }); console.log(arr); })();
配置: Gruntfile.js
配置任務(wù):
concat: { options: { //可選項配置 separator: ";" //使用;連接合并 }, build: { //此名稱任意 src: ["src/js/*.js"], //合并哪些js文件 dest: "build/js/built.js" //輸出的js文件 } }
加載插件:
grunt.loadNpmTasks("grunt-contrib-concat");
注冊任務(wù):
grunt.registerTask("default", ["concat"]);
命令:
grunt //會在build下生成一個built.js
壓縮js: 使用uglify插件
下載
npm install grunt-contrib-uglify --save-dev
配置: Gruntfile.js
配置任務(wù):
pkg : grunt.file.readJSON("package.json"), uglify : { options: { //不是必須的 banner: "/*! <%= pkg.name %> - v<%= pkg.version %> - " + "<%= grunt.template.today("yyyy-mm-dd") %> */" }, build: { files: { "build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js": ["build/js/built.js"] } } }
加載任務(wù):
grunt.loadNpmTasks("grunt-contrib-uglify");
注冊任務(wù):
grunt.registerTask("default", ["concat", "uglify"]);
命令:
grunt //會在build下生成一個壓縮的js文件
js語法檢查: 使用jshint插件
命令:
npm install grunt-contrib-jshint --save-dev
編碼: .jshintrc
{ "curly": true, "eqeqeq": true, "eqnull": true, "expr" : true, "immed": true, "newcap": true, "noempty": true, "noarg": true, "regexp": true, "browser": true, "devel": true, "node": true, "boss": false, //不能使用未定義的變量 "undef": true, //語句后面必須有分號 "asi": false, //預(yù)定義不檢查的全局變量 "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"] }
修改src/js/test1.js
(function () { function add(num1, num2) { num1 = num1 + num3 return num1 + num2; } console.log(add(10, 20)); })();
配置 : Gruntfile.js
配置任務(wù):
jshint : { options: { jshintrc : ".jshintrc" //指定配置文件 }, build : ["Gruntfile.js", "src/js/*.js"] //指定檢查的文件 }
加載任務(wù):
grunt.loadNpmTasks("grunt-contrib-jshint");
注冊任務(wù):
grunt.registerTask("default", ["concat", "uglify", "jshint"]);
命令:
grunt //提示變量未定義和語句后未加分號 -->修改后重新編譯
使用cssmin插件
安裝:
npm install grunt-contrib-cssmin --save-dev
編碼:
test1.css
#box1 { width: 100px; height: 100px; background: red; }
test2.css
#box2 { width: 200px; height: 200px; background: blue; }
index.html
配置 : Gruntfile.js
配置任務(wù):
cssmin:{ options: { shorthandCompacting: false, roundingPrecision: -1 }, build: { files: { "build/css/output.min.css": ["src/css/*.css"] } } }
加載任務(wù):
grunt.loadNpmTasks("grunt-contrib-cssmin");
注冊任務(wù):
grunt.registerTask("default", ["concat", "uglify", "jshint", "cssmin"]);
命令:
grunt //在build/css/下生成output.min.css
使用watch插件(真正實現(xiàn)自動化)
命令: npm install grunt-contrib-watch --save-dev
配置 : Gruntfile.js
配置任務(wù):
watch : { scripts : { files : ["src/js/*.js", "src/css/*.css"], tasks : ["concat", "jshint", "uglify", "cssmin"], options : {spawn : false} } }
加載任務(wù):
grunt.loadNpmTasks("grunt-contrib-watch");
注冊任務(wù):
grunt.registerTask("default", ["concat", "uglify", "jshint", "watch"]); 改進(jìn):grunt.registerTask("myWatch", ["default","watch"]);
命令:
grunt //控制臺提示watch已經(jīng)開始監(jiān)聽, 修改保存后自動編譯處理
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84205.html
摘要:介紹中文主頁是一套前端自動化構(gòu)建工具,一個基于的命令行工具它是一個任務(wù)運(yùn)行器配合其豐富強(qiáng)大的插件常用功能合并文件壓縮文件語法檢查預(yù)編譯處理其它安裝查看版本創(chuàng)建一個簡單的應(yīng)用構(gòu)建生成的文件所在的文件夾 Grunt介紹 中文主頁 : http://www.gruntjs.net/ 是一套前端自動化構(gòu)建工具,一個基于nodeJs的命令行工具 它是一個任務(wù)運(yùn)行器, 配合其豐富強(qiáng)大的插件 ...
摘要:是一款流式構(gòu)建系統(tǒng),如果說是基于任務(wù)執(zhí)行器,就是基于的文件流任務(wù)執(zhí)行器,比起有如下特點使用方便通過代碼優(yōu)于配置的策略,可以讓簡單的任務(wù)簡單,復(fù)雜的任務(wù)更可管理。 作者:Jogis原文鏈接:https://github.com/yesvods/Blog/issues/1轉(zhuǎn)載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
閱讀 3485·2021-11-12 10:36
閱讀 2857·2021-09-22 15:35
閱讀 2807·2021-09-04 16:41
閱讀 1163·2019-08-30 15:55
閱讀 3574·2019-08-29 18:43
閱讀 2070·2019-08-23 18:24
閱讀 1412·2019-08-23 18:10
閱讀 1921·2019-08-23 11:31