grunt -- javascript自动化工具

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自动化工具相关推荐

前端自动化工具 grunt 插件 uglify 的简单使用（一）
Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
前端工作流程自动化——Grunt/Gulp 自动化
前端工作流程自动化--Grunt/Gulp 自动化 Grunt/Gulp 都是node.js下的模块,简单来说是自动化任务运行器,两者都有社区及大量的插件支撑,在所有的自动化工具领域里,这两者是最好的 ...
Grunt搭建自动化web前端开发环境--完整流程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
JavaScript开发工具大全 1
译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采 ...
JavaScript开发工具简明历史
译者按: JavaScript开发要用到的工具越来越多,越来越复杂,为什么呢?你真的弄明白了吗? 原文: Modern JavaScript Explained For Dinosaurs 为了保证可 ...
gulp前端自动化工具的快速入门案例
最近项目和工作中要开始使用自动化工具了,回想一下以前接触这个的时候就是什么nodejs,grunt之类的了,这次干脆就用一个新的,那么就是gulp... 全局下利用npm安装gulp sudo npm ...
华为云龙api自动化工具_2020年十大最佳自动化测试工具
Best Automation Testing Tools for 2020 对更快交付高质量软件(或"快速质量")的需求要求组织以敏捷,持续集成(CI)和DevOps方法论来寻找 ...
开源自动化部署工具_6种开源家庭自动化工具
开源自动化部署工具编者注:本文最初于2016年3月发布,现已更新,以包括其他选项和信息. 自从我们上一次在2016年发布有关家庭自动化工具的评论文章以来,物联网不仅仅是一个时髦的词,而且这个事实正在 ...

grunt -- javascript自动化工具

grunt -- javascript自动化工具相关推荐

最新文章

热门文章