grunt 配置

2017-12-18  本文已影响0人  素时年锦
1、首先电脑上面安装node

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

查看有没有安装成功,输入命令: node -v 显示下图版本号说明成功 image.png
2、安装grunt的命令环境:npm install grunt-cli -g 全局安装需要 加-g image.png
3、查看有没有安装成功,输入命令:grunt --version image.png
4、手动在文件夹中创建 Gruntfile.js 文件 image.png
4、输入命令 npm init 生成 package.json文件(这里我是一路Enter 到底 ) image.png
这个时候文件夹中多了一个package.json文件 image.png
5、安装grunt 输入命令:npm install grunt --save-dev
image.png 这个时候观察 package.json文件里面的变化 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文件里面变化

image.png
7、配置Gruntfile.js
上一篇下一篇

猜你喜欢

热点阅读