gulp是基于nodejs,所以,安装gulp前先安装node js,通过nodejs的npm全局安装和项目安装gulp。
1、nodejs安装:
打开nodejs官网,选择DOWNLOADS,根据自己的系统点击选择对应版本(.msi文件)。然后安装即可(安装路径随意)。
2、安装完成后 打开DOS窗口(打开方式:win+r --->输入cmd --->按回车)输入命令 如下图:
node -v:查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。
npm -v:查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器。
3、接下来安装npm,由于npm安装插件过程:从http://registry.npmjs.org下载对应的插件包
由于该网站服务器位于国外,所以经常下载缓慢或出现异常。所以,解决该问题的办法就是:
选装cnpm(注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm)
在命令行下切换到项目目录下执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
按回车,命令行会出现一个转动的小横线,表示正在联网加载。加载完后,就会出现以下界面
4、全局安装gulp。
1)在DOS窗口输入cnpm install gulp -g,按回车,命令行会出现一个转动的小横线,表示正在联网加载。加载完后,就会出现以下界面
2)查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。
5、新建package.json文件
创建package.js文件通常有两种方式。
1) 直接在你的项目目录下新建一个package.json文件,编辑内容:
(注意:json文件内是不能写注释的,复制下列内容请删除注释)
package.json文件
{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "this is a test", //项目描述(必须)
"main": "gulpfile.js", //文件入口(必须)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",//作者
"license": "ISC",//许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.9.1",
"gulp-less": "^3.3.0"
}
}
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less');
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
gulp.src('css/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('css/index')); //将会在css下生成index.css
});
gulp.task('default',['testLess']); //定义默认任务