grunt 配置

1、首先电脑上面安装node

nodejs官网:https://nodejs.org/en/

查看有没有安装成功,输入命令: node -v 显示下图版本号说明成功
grunt 配置_第1张图片
image.png
2、安装grunt的命令环境:npm install grunt-cli -g 全局安装需要 加-g
grunt 配置_第2张图片
image.png
3、查看有没有安装成功,输入命令:grunt --version
grunt 配置_第3张图片
image.png
4、手动在文件夹中创建 Gruntfile.js 文件
grunt 配置_第4张图片
image.png
4、输入命令 npm init 生成 package.json文件(这里我是一路Enter 到底 )
grunt 配置_第5张图片
image.png

这个时候文件夹中多了一个package.json文件
grunt 配置_第6张图片
image.png
5、安装grunt 输入命令:npm install grunt --save-dev
grunt 配置_第7张图片
image.png

这个时候观察 package.json文件里面的变化
grunt 配置_第8张图片
image.png

这个时候自动加上了grunt 版本号,这也就是命令 --save-dev 的作用

6、安装grunt插件了

js语法检查:grunt-contrib-jshint

css语法检查:grunt-contrib-csslint

合并文件:grunt-contrib-concat

js压缩文件:grunt-contrib-uglify

css压缩文件:grunt-contrib-cssmin

image压缩文件:grunt-contrib-imagemin

html压缩文件:grunt-contrib-htmlmin

Sass\Scss 编译:grunt-contrib-sass

Less 编译:grunt-contrib-less

监听文件变动:grunt-contrib-watch

建立本地服务器:grunt-contrib-connect

输入命令:npm install grunt-contrib-jshint --save-dev 直接下载对应的插件,一个一个下载是不是太麻烦了?这里也可以直接输入所有的插件名,然后一起下载
npm install grunt-contrib-jshint grunt-contrib-csslint grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-htmlmin grunt-contrib-sass grunt-contrib-less grunt-contrib-watch grunt-contrib-connect --save-dev下载好后,看下package.json文件里面变化

grunt 配置_第9张图片
image.png

7、配置Gruntfile.js

你可能感兴趣的:(grunt 配置)