grunt 是一個基于npm,node.js 用js編寫的工具框架,可以自動完成一些重復性的任務(如合并文件,語法檢查,壓縮代碼),

grunt擁有龐大的插件庫,可以滿足各種自動化批處理需求,常用的插件有:

concat ?--->?合并文件
csslint??---> css語法檢查
cssmin??--->?css壓縮
jshint ?--->?js語法檢查
uglify??--->?js壓縮
watch??--->?自動化核心,監視文件修改并執行插件
autoprefixer ---> css瀏覽器前綴補全

node.js,grunt和grunt-cli 的安裝略.

插件安裝指令:

npm install grunt-contrib-concat --save-dev npm install grunt-contrib-csslint --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-jshint --save-dev npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-watch --save-dev npm install grunt-autoprefixer --save-dev

npm package.json 安裝完插件后的配置

{"name": "grunt_test","version": "1.0.1","devDependencies": {"grunt": "^1.0.1","grunt-autoprefixer": "^3.0.4","grunt-contrib-concat": "^1.0.1","grunt-contrib-csslint": "^2.0.0","grunt-contrib-cssmin": "^1.0.2","grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0","grunt-contrib-watch": "^1.0.0"} }

?

[重中之重]?Gruntfile.js ?grunt配置文件

?

//包裝函數 module.exports=function (grunt) {//任務配置,所有插件的配置信息 grunt.initConfig({//獲取 package.json 的信息pkg:grunt.file.readJSON('package.json'),//js壓縮 uglify: {options: {//頭部注釋banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +'<%= grunt.template.today("yyyy-mm-dd") %> */',//生成sourceMapsourceMap: true},my_target: {files: [{expand: true,//源文件相對路徑cwd: 'src/',//選擇文件src: ['*.js','!*.min.js'],//目標文件輸出目錄dest: 'dest/',//后綴ext: '.min.js'}]}},//js語法檢查 jshint: {options:{jshintrc:'.jshintrc'}, my_target: ['src/*.js'],},//css壓縮 cssmin:{ options: {//文件頭部輸出信息banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',//美化代碼 beautify: {//中文ascii化，非常有用,防止中文亂碼ascii_only: true}},my_target: {files: [{expand: true,//源文件相對路徑cwd: 'src/',//選擇文件src: ['*.css','!*.min.css'],//目標文件輸出目錄dest: 'dest/',//后綴ext: '.min.css'}]}},//css語法檢查 csslint:{options:{csslintrc:'.csslintrc'},build:['src/*.css']},//自動化 watch:{test1:{tasks:['jshint','uglify'],options:{spawn:false}},test2:{tasks:['csslint','cssmin'],options:{spawn:false}}},//合并文件 concat: {options: {separator: ';\n',stripBanners: true,banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},dist: {src: ['src/*.js'],dest: 'dest/basic.js',},},//css瀏覽器前綴補全 autoprefixer: {options: {browsers: ['Chrome < 50', 'ie > 8' ,'ff < 20','opera < 39']},your_target: {files: [{expand: true,//源文件相對路徑cwd: 'src/',//選擇文件src: ['*.css','!*.min.css'],//目標文件輸出目錄dest: 'dest/',//后綴ext: '.fix.css'}]},},});//告訴grunt我們將要使用的插件grunt.loadNpmTasks('grunt-contrib-concat');//合并代碼grunt.loadNpmTasks('grunt-contrib-jshint');//js語法檢查grunt.loadNpmTasks('grunt-contrib-csslint');//css語法檢查grunt.loadNpmTasks('grunt-contrib-cssmin');//css壓縮grunt.loadNpmTasks('grunt-contrib-uglify');//js壓縮grunt.loadNpmTasks('grunt-contrib-watch');//自動化核心,監視文件修改并執行插件grunt.loadNpmTasks('grunt-autoprefixer');//css瀏覽器前綴補全//告訴grunt當我們在終端中輸入grunt時需要做些什么(注意先后順序)grunt.registerTask('cont',['concat']);grunt.registerTask('afix',['autoprefixer']);grunt.registerTask('mcss',['cssmin']);grunt.registerTask('mjs',['uglify']);grunt.registerTask('default',['jshint','uglify','watch']); }

1,js,css壓縮配置中,都是多個文件單獨壓縮生成多個對應文件名的.min.js或.min.css,并生成對應的sourceMap

2,autoprefixer配置中browsers: ['Chrome < 50', 'ie > 8' ,'ff < 20','opera < 39'], 設定要兼容的瀏覽器版本,故意將版本設置調低,可以兼容給多的瀏覽器,否則默認只兼容

['> 1%', 'last 2 versions', 'Firefox ESR'] 最新版本的主流瀏覽器

3,js語法檢查和css語法檢查都引用了外部配置文件(json格式) .jshintrc 和 .csslintrc ,如下

.jshintrc:

{"curly": true,"eqeqeq": true,"eqnull": true,"browser": true,"boss":false,"expr":true,"immed":true,"newcap":true,"noempty":true,"noarg":true,"undef":true,"regexp":true,"node":true,"devel":true,"globals": {"jQuery": true} }

.csslintrc

{"adjoining-classes":false,"box-sizing":false,"box-model" : false,"compatible-vendor-prefixes": false,"floats":false,"font-sizes":false,"gradients":false,"important":false,"known-properties":false,"outline-none":false,"qualified-headings":false,"regex-selectors":false,"shorthand":false,"text-indent":false,"unique-headings":false,"universal-selector":false,"unqualified-attributes":false }

執行相應task:

已經注冊的task, ?grunt.registerTask('mcss',['cssmin']') , 執行命令為 grunt?mcss

未注冊的task, ? ??可以直接調用相應插件,執行命令為?grunt?cssmin

?

轉載于:https://www.cnblogs.com/king2016/p/5963128.html

總結

以上是生活随笔為你收集整理的grunt -- javascript自动化工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。