前端自动化工具 grunt 插件 jshint 的简单使用(四)

一、contrib-jshint 插件的使用

1、安装 “grunt-contrib-jshint ”插件命令(在终端进入到项目根目录执行)

npm install grunt-contrib-jshint --save-dev

2、在项目根目录下提供 jshint 插件任务配置需要的 src 目录和需要被检测的源文件(js 源文件放置到 src 目录下)

mkdir src

3、在 Gruntfile.js 文件中对 jshint 任务进行配置

 // 包装函数module.exports = function (grunt) {         // 任务配置,所有插件的配置信息        grunt.initConfig({                // 获取 package.json 的信息                pkg: grunt.file.readJSON(‘package.json‘),                // jshint 插件的配置信息                jshint: {                    options: {                        ‘-W060‘: true,             // 根据错误代码屏蔽指定错误                        jshintrc: ‘.jshintrc‘      // 指定 jshint 语法检测规则的配置文件                    },                    // 具体任务配置                    build: [‘src/*.js‘]      // 需要进行 js 语法检测的源文件,可以同时指定多个文件                }        });  // 加载指定插件任务grunt.loadNpmTasks(‘grunt-contrib-jshint‘);  

// 默认执行的任务grunt.registerTask(‘default‘, [‘jshint‘]);};

PS:jshint 插件的配置有两项:

“options”中通过使用“jshintrc”属性来指定 jshint 语法检测规则的配置文件,.jshintrc 文件中代码的格式也要严格遵守 json 语法规范,否则无效。

“build”中指定哪些 js 文件需要进行语法检测。

4、最后在终端运行 grunt 命令

PS:如果提示 "Done, without errors."  证明就没什么问题了。

5、.jshintrc 文件的配置(该文件放置到项目根目录下)

{      "asi": true,               // 是否禁止缺少分号警告      "loopfunc": true,     // 是否禁止函数内部循环      "expr": true,            // 是否支持使用正则表达式      "node": true,           // 该文件是否为 node.js 文件      "curly": true,           // 代码块是否必须使用大括号      "eqeqeq": false,      // 是否使用 "===" 表示相等,"!==" 表示不等      "eqnull": false,        // 是否禁止使用 "== null" 比较      "undef": true,         // 是否指定变量必须先声明后使用      "strict": false,          // 是否禁止使用严格模式}

PS:jshintrc 文件中的选项具体的含义请参考 http://jshint.com/docs/options/

时间: 2024-10-10 17:30:42

前端自动化工具 grunt 插件 jshint 的简单使用(四)的相关文章

前端自动化工具 grunt 插件 htmlmin 的简单使用(五)

一.contrib-htmlmin 插件的使用 1.安装 "grunt-contrib-htmlmin "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-htmlmin --save-dev 2.在项目根目录下提供 htmlmin 插件任务配置需要的 src 目录和需要被压缩的源文件(html 源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 htmlmin 任务进行配置 // 包装函数modul

前端自动化工具 grunt 插件 imagemin 的简单使用(六)

一.contrib-imagemin 插件的使用 1.安装 "grunt-contrib-imagemin "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-imagemin --save-dev 2.在项目根目录下提供 imagemin 插件任务配置需要的 src 目录和需要被压缩的图片文件(图片文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 imagemin 任务进行配置 // 包装函数mod

前端自动化工具 grunt 插件 watch 的简单使用(七)

一.contrib-watch 插件的使用 1.安装 "grunt-contrib-watch "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-watch --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-uglify --save-dev 2.在项目根目录下提供 watch 插件任务配置需要的 src 目录和源文件(源文件放置到

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

前端自动化工具 grunt 插件的简单使用(二)

一.contrib-concat 插件的使用 1.安装 "grunt-contrib-concat "插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-concat --save-dev 2.在项目根目录下提供 concat 插件配置需要的 src 目录和需要被合并的源文件(合并源文件放置到 src 目录下) mkdir src 3.在 Gruntfile.js 文件中对 concat 任务进行配置 // 包装函数module.exports

前端自动化工具 grunt 插件之 concat 和 uglify 的联合使用(三)

一.contrib-concat 和 contrib-uglify 插件的联合使用 1.安装 concat 和 uglify 插件命令(在终端进入到项目根目录执行) npm install grunt-contrib-concat  --save-dev npm install grunt-contrib-uglify  --save-dev 2.在项目根目录下提供 concat 和 uglify 插件任务配置需要的 src 目录和需要被合并的源文件(合并源文件放置到 src 目录下) mkdi

前端自动化工具 -- grunt 使用简介

grunt是什么,grunt就是个东西.. grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以 来这看看 还是在windows下, 首先要保证grunt命令可以使用,所以要先使用npm安装对应CLI npm install -g grunt-cli 安装完成可以命令行中输入“grunt”测试是否安装成功 安装成功后 二.用法说明 grunt需要pac

前端自动化工具:Grunt使用教程

1.下载node.js 2.安装npm管理工具 2.1.下载npm源码,解压到npm文件夹里 2.2.使用命令  node cli.js install -gf 安装npm  或者命令 node cli.js install npm -gf //可以安装最新版的NPM node cli.js install [email protected] -gf //可以安装指定版本的NPM 2.3.npm安装完成后,将"D:\npm\node_modules"加入系统环境变量NODE_PATH中

前端自动化工具 -- fis 使用简介

FIS也是一个新生的前端自动化工具,好下面就来简单介绍一下,真的好简单介绍啊.. 个人觉得FIS已经囊括了一个“大前端”的范畴. 先来看看别人怎么看FIS和Grunt和Gulp F.I.S在实际项目中的应用体验如何? 前端工具里面gulp和fis,有哪些优缺点? FIS和Grunt的区别 FIS入门很简单,提高难度也不大,因为官方已经提供了非常多的文档 围绕着最基本的三条命令 fis install <name> fis release [options] fis server <com