JavaScript自我管理指的是什么

這篇文章主要介紹了JavaScript自我管理指的是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JavaScript自我管理是指Grunt任務自動管理工具，Grunt可以幫助我們自動管理和運行各種任務；Grunt是一個自動任務運行器，會按照預先設定的順序自動運行一系列的任務，這可以簡化工作流程，減輕重復性工作帶來的負擔。

本文操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript自我管理是什么,Grunt：任務自動管理工具

安裝命令腳本文件Gruntfile.jsGruntfile.js實例：grunt-contrib-cssmin模塊常用模塊設置grunt-contrib-jshintgrunt-contrib-concatgrunt-contrib-uglifygrunt-contrib-copygrunt-contrib-watch其他模塊參考鏈接

在Javascript的開發過程中，經常會遇到一些重復性的任務，比如合并文件、壓縮代碼、檢查語法錯誤、將Sass代碼轉成CSS代碼等等。通常，我們需要使用不同的工具，來完成不同的任務，既重復勞動又非常耗時。Grunt就是為了解決這個問題而發明的工具，可以幫助我們自動管理和運行各種任務。

簡單說，Grunt是一個自動任務運行器，會按照預先設定的順序自動運行一系列的任務。這可以簡化工作流程，減輕重復性工作帶來的負擔。

安裝

Grunt基于Node.js，安裝之前要先安裝Node.js，然后運行下面的命令。

sudo npm install grunt-cli -g

grunt-cli表示安裝的是grunt的命令行界面，參數g表示全局安裝。

Grunt使用模塊結構，除了安裝命令行界面以外，還要根據需要安裝相應的模塊。這些模塊應該采用局部安裝，因為不同項目可能需要同一個模塊的不同版本。

首先，在項目的根目錄下，創建一個文本文件package.json，指定當前項目所需的模塊。下面就是一個例子。

{"name": "my-project-name","version": "0.1.0","author": "Your Name","devDependencies": {"grunt": "0.x.x","grunt-contrib-jshint": "*","grunt-contrib-concat": "~0.1.1","grunt-contrib-uglify": "~0.1.0","grunt-contrib-watch": "~0.1.4"}}

上面這個package.json文件中，除了注明項目的名稱和版本以外，還在devDependencies屬性中指定了項目依賴的grunt模塊和版本：grunt核心模塊為最新的0.x.x版，jshint插件為最新版本，concat插件不低于0.1.1版，uglify插件不低于0.1.0版，watch插件不低于0.1.4版。

然后，在項目的根目錄下運行下面的命令，這些插件就會被自動安裝在node_modules子目錄。

npm install

上面這種方法是針對已有package.json的情況。如果想要自動生成package.json文件，可以使用npm init命令，按照屏幕提示回答所需模塊的名稱和版本即可。

npm init

如果已有的package.json文件不包括Grunt模塊，可以在直接安裝Grunt模塊的時候，加上–save-dev參數，該模塊就會自動被加入package.json文件。

npm install--save-dev

比如，對應上面package.json文件指定的模塊，需要運行以下npm命令。

npm install grunt --save-devnpm install grunt-contrib-jshint --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-contrib-watch --save-dev命令腳本文件Gruntfile.js

模塊安裝完以后，下一步在項目的根目錄下，新建腳本文件Gruntfile.js。它是grunt的配置文件，就好像package.json是npm的配置文件一樣。Gruntfile.js就是一般的Node.js模塊的寫法。

module.exports = function(grunt) {// 配置Grunt各種模塊的參數grunt.initConfig({jshint: { /* jshint的參數 */ },concat: { /* concat的參數 */ },uglify: { /* uglify的參數 */ },watch:{ /* watch的參數 */ }});// 從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']);};

上面的代碼用到了grunt代碼的三個方法：

grunt.initConfig：定義各種模塊的參數，每一個成員項對應一個同名模塊。grunt.loadNpmTasks：加載完成任務所需的模塊。grunt.registerTask：定義具體的任務。第一個參數為任務名，第二個參數是一個數組，表示該任務需要依次使用的模塊。default任務名表示，如果直接輸入grunt命令，后面不跟任何參數，這時所調用的模塊（該例為jshint，concat和uglify）；該例的check任務則表示使用jshint插件對代碼進行語法檢查。

上面的代碼一共加載了四個模塊：jshint（檢查語法錯誤）、concat（合并文件）、uglify（壓縮代碼）和watch（自動執行）。接下來，有兩種使用方法。

【推薦學習：javascript高級教程】

（1）命令行執行某個模塊，比如

grunt jshint

上面代碼表示運行jshint模塊。

（2）命令行執行某個任務。比如

grunt check

上面代碼表示運行check任務。如果運行成功，就會顯示“Done, without errors.”。

如果沒有給出任務名，只鍵入grunt，就表示執行默認的default任務。

Gruntfile.js實例：grunt-contrib-cssmin模塊

下面通過cssmin模塊，演示如何編寫Gruntfile.js文件。cssmin模塊的作用是最小化CSS文件。

首先，在項目的根目錄下安裝該模塊。

npm install grunt-contrib-cssmin --save-dev

然后，新建文件Gruntfile.js。

module.exports = function(grunt) {grunt.initConfig({cssmin: {minify: {expand: true,cwd: 'css/',src: ['*.css', '!*.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']);};

下面詳細解釋上面代碼中的三個方法，下面一個個來看。

（1）grunt.loadNpmTasks

grunt.loadNpmTasks方法載入模塊文件。

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

你需要使用幾個模塊，這里就要寫幾條grunt.loadNpmTasks語句，將各個模塊一一加載。

如果加載模塊很多，這部分會非常冗長。而且，還存在一個問題，就是凡是在這里加載的模塊，也同時出現在package.json文件中。如果使用npm命令卸載模塊以后，模塊會自動從package.json文件中消失，但是必須手動從Gruntfile.js文件中清除，這樣很不方便，一旦忘記，還會出現運行錯誤。這里有一個解決辦法，就是安裝load-grunt-tasks模塊，然后在Gruntfile.js文件中，用下面的語句替代所有的grunt.loadNpmTasks語句。

require('load-grunt-tasks')(grunt);

這條語句的作用是自動分析package.json文件，自動加載所找到的grunt模塊。

（2）grunt.initConfig

grunt.initConfig方法用于模塊配置，它接受一個對象作為參數。該對象的成員與使用的同名模塊一一對應。由于我們要配置的是cssmin模塊，所以里面有一個cssmin成員（屬性）。

cssmin（屬性）指向一個對象，該對象又包含多個成員。除了一些系統設定的成員（比如options），其他自定義的成員稱為目標（target）。一個模塊可以有多個目標（target），上面代碼里面，cssmin模塊共有兩個目標，一個是“minify”，用于壓縮css文件；另一個是“combine”，用于將多個css文件合并一個文件。

每個目標的具體設置，需要參考該模板的文檔。就cssmin來講，minify目標的參數具體含義如下：

expand：如果設為true，就表示下面文件名的占位符（即*號）都要擴展成具體的文件名。cwd：需要處理的文件（input）所在的目錄。src：表示需要處理的文件。如果采用數組形式，數組的每一項就是一個文件名，可以使用通配符。dest：表示處理后的文件名或所在目錄。ext：表示處理后的文件后綴名。

除了上面這些參數，還有一些參數也是grunt所有模塊通用的。

filter：一個返回布爾值的函數，用于過濾文件名。只有返回值為true的文件，才會被grunt處理。dot：是否匹配以點號（.）開頭的系統文件。makeBase：如果設置為true，就只匹配文件路徑的最后一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123。

關于通配符，含義如下：

*：匹配任意數量的字符，不包括/。?：匹配單個字符，不包括/。**：匹配任意數量的字符，包括/。{}：允許使用逗號分隔的列表，表示“or”（或）關系。!：用于模式的開頭，表示只返回不匹配的情況。

比如，foo/.js匹配foo目錄下面的文件名以.js結尾的文件，foo/**/.js匹配foo目錄和它的所有子目錄下面的文件名以.js結尾的文件，!*.css表示匹配所有后綴名不為“.css”的文件。

使用通配符設置src屬性的更多例子：

{src: 'foo/th*.js'}grunt-contrib-uglify{src: 'foo/{a,b}*.js'}{src: ['foo/a*.js', 'foo/b*.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'],},// orfiles: [{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: { /* ... */ },minify: { /* ... */ },combine: { /* ... */ }}});

（3）grunt.registerTask

grunt.registerTask方法定義如何調用具體的任務。“default”任務表示如果不提供參數，直接輸入grunt命令，則先運行“cssmin:minify”，后運行“cssmin:combine”，即先壓縮再合并。如果只執行壓縮，或者只執行合并，則需要在grunt命令后面指明“模塊名:目標名”。

grunt # 默認情況下，先壓縮后合并grunt cssmin:minify # 只壓縮不合并grunt css:combine # 只合并不壓縮

如果不指明目標，只是指明模塊，就表示將所有目標依次運行一遍。

grunt cssmin常用模塊設置

grunt的模塊已經超過了2000個，且還在快速增加。下面是一些常用的模塊（按字母排序）。

grunt-contrib-clean：刪除文件。grunt-contrib-compass：使用compass編譯sass文件。grunt-contrib-concat：合并文件。grunt-contrib-copy：復制文件。grunt-contrib-cssmin：壓縮以及合并CSS文件。grunt-contrib-imagemin：圖像壓縮模塊。grunt-contrib-jshint：檢查JavaScript語法。grunt-contrib-uglify：壓縮以及合并JavaScript文件。grunt-contrib-watch：監視文件變動，做出相應動作。

模塊的前綴如果是grunt-contrib，就表示該模塊由grunt開發團隊維護；如果前綴是grunt（比如grunt-pakmanager），就表示由第三方開發者維護。

以下選幾個模塊，看看它們配置參數的寫法，也就是說如何在grunt.initConfig方法中配置各個模塊。

grunt-contrib-jshint

jshint用來檢查語法錯誤，比如分號的使用是否正確、有沒有忘記寫括號等等。它在grunt.initConfig方法里面的配置代碼如下。

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

上面代碼先指定jshint的檢查項目，eqeqeq表示要用嚴格相等運算符取代相等運算符，trailing表示行尾不得有多余的空格。然后，指定files屬性，表示檢查目標是Gruntfile.js文件，以及lib目錄的所有子目錄下面的JavaScript文件。

grunt-contrib-concat

concat用來合并同類文件，它不僅可以合并JavaScript文件，還可以合并CSS文件。

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 : '*.js',dest : 'js/'}},

上面代碼中的options屬性指定壓縮后文件的文件頭，以及sourceMap設置；target目標指定輸入和輸出文件。

grunt-contrib-copy

copy模塊用于復制文件與目錄。

copy: {main: {src: 'src/*',dest: 'dest/',},},

上面代碼將src子目錄（只包含它下面的第一層文件和子目錄），拷貝到dest子目錄下面（即dest/src目錄）。如果要更準確控制拷貝行為，比如只拷貝文件、不拷貝目錄、不保持目錄結構，可以寫成下面這樣：

copy: {main: {expand: true,cwd: 'src/',src: '**',dest: 'dest/',flatten: true,filter: 'isFile',},},grunt-contrib-watch

watch模塊用來在后臺運行，監聽指定事件，然后自動運行指定的任務。

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

設置好上面的代碼，打開另一個進程，運行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: '*'}}}

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屬性指定轉換時采用的模板，模板樣式如下。

Document參考鏈接Frederic Hemberger, A build tool for front-end projectsMária Jur?ovi?ová, Building a JavaScript Library with Grunt.jsBen Briggs，Speed Up Your Web Development Workflow with GruntOptimizing Images With GruntSwapnil Mishra, Simplifying Chores with GruntAJ ONeal, Moving to GruntJSGrunt Documentation, Configuring tasksLandon Schropp, Writing an Awesome Build Script with GruntMike Cunsolo, Get Up And Running With GruntMatt Bailey, A Beginner’s Guide to Using Grunt With MagentoPaul Bakaus, Supercharging your Gruntfile

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript自我管理指的是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!