刚开始如图所示,发现npm命名,没听过于是找度娘。出现官网了:npm官网,这下好了再也不是无头苍蝇到处乱撞了。按照官网的步骤弄好了。继续往下。
好家伙,又出现一个gulp,一看有没听过,这时候只有找度娘了。有一个官网出现了gulpjs又一路安装然后发现可以用了。之后的步骤就参考上面的文章,然后成功了。
话不多说,上总结,教你使用postcss。
1.安装npm,官网下载Node.js下载安装。
1.1 node -v检查node.js版本
npm -v检查npm版本
1.2 npm install npm@latest -g检查更新node.js的npm版本(建议更新,安装gulp过程中可能会出现版本太低 而不能安装的情况)
2.建议安装cnpm(和npm用法相同,但npm国外的受网速限制)
npm install cnpm -g --registry=https://registry.npm.taobao.org
3.安装gulp(既然安装了cpnm那下面就用cnpm代替npm了)
3.1安装全局gulp :cnpm install gulp -g
3.2切换到项目内,在项目中安装:cnpm install gulp --save-dev
全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
接下来的步骤都是在项目中进行
4.初始化package.json
cnpm init
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "This is for study gulp project !", //项目描述(必须)
"homepage": "", //项目主页
"repository": //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
"author": //项目作者信息
"name": "surging",
"email": "[email protected]"
"license": "ISC", //项目许可协议
"devDependencies": //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
上面列出一些别人真是项目的填写信息,由于我是自己测试这里就乱填了一些,其实不填也一样。
你也可以使用cnpm help package.json查看帮助文档
5.安装需要的插件我用到了(less,minify-css,nofity,plumber,autoprefixer,postcss,precss)
安装命令 cpnm install gulp-插件名称 --save-dev
less:是写css的一种方式,我想不用多说了吧。
minify-css:兼容IE7一下需要
nofity,plumber一起使用提示错误信息
autoprefixer:加浏览器前缀
postcss,precss就是我这次要研究的(大虾可以帮我解释一下)
autoprefixer这个地方有个坑,安装的时候要是手快写成npm install gulp autoprefixer,那就恭喜你执行方法的时候会遇到is not a PostCSS plugin的问题,npm install autoprefixer才是正确的打开方式。press安装时候也是一样。
6.在根目录创建gulpfile.js,在js中写代码,使用插件。这里直接上代码了。
你会发现我写了三个方法 postcss方法是使用postcss将插件做成数组传入,lessToCSS是直接用pipe()调用插件,lessWatch则是监听lessToCSS方法变化。
总结一下发现用postcss和直接用pipe()没什么区别,有大虾知道有什么区别可以指导一二。
7.执行
7.1命令行
gulp +方法名:gulp lessToCSS
7.2idea基本都支持
到此就算完结了,搞完这一堆东西,折腾我一下午。突然想大家是有多讨厌写css弄出这么大一堆东西。
弄玩之后发现一个不错的网站,关于gulp插件都有介绍使用教程。希望大家不要像我走弯路一点