gulp:是一个自动化工具,前端开发者可以使用它来处理常见任务:
- 搭建web服务器
- 文件保存时自动重载浏览器
- 使用预处理器如Sass、LESS
- 优化资源,比如压缩CSS、JavaScript、压缩图片
今天这篇是一个入门,如何搭建gulp。
- 安装node.js
首先它是基于node.js环境下的。点击下载。
需要注意的是系统版本32/64位。
安装好node.js后,win键+R打开cmd命令控制台输入 node -v 如果显示版本号,说明安装成功。
2.安装cnpm
尽管node.js自带了cpm但是不会翻墙的孩纸们一定不愿意看到红色的错误提示。我们还是老老实实的安装马云爸爸提供的cnpm吧。
官方网址:http://npm.taobao.org;
win键+R打开命令控制台输入 npm install cnpm -g --registry=https://registry.npm.taobao.org
安装完后最好查看其版本号 cnpm -v 如果报错,关闭命令控制台重新打开查看,因为有时候会报错。
有了以上的环境,和工具,我们就可以安装gulp了。
3.安装gulp-全局
cmd命令控制台输入 cnpm install gulp -g 所有命令行在淘宝提供的官网都有可查。
安装完成后检查 gulp -v
4.创建package.json文件
package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件。我们的项目里如果没有这个文件,nodejs不会识别。所以要有这个文件。
- 首先在D盘创建一个名为www的文件夹,这就是我们的站点了。
- 创建package.json方式有两种,一种是手写,一种是通过cnpm下载。
- 下面就是文件内容,注意复制后一定要把注释删除掉,否则会报错。
-
{ "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": "surging2@qq.com" }, "license": "ISC", //项目许可协议 "devDependencies": { //项目依赖的插件 "gulp": "^3.8.11", "gulp-less": "^3.0.0" } }
- 第二种我们可以使用命令创建
- 打开D盘我们创建的www文件夹按着shift键并鼠标右击,找到“在此处打开命令窗口”。这时弹出来的就是当前路径下的cmd命令控制台了。
- 我们输入cnpm init
查看package.json帮助文档,命令控制台cnpm help package.json
- 特别注意:package.json是一个普通json文件,所以不能添加任何注释。参看 http://www.zhihu.com/question/23004511
5.创建本地gulp和插件【重要】
有了gulp插件,我们就可以操控web项目了。
这里用一个less预处理插件,将我们写的less文件用插件转化成css文件。并且是实时同步的。
- 在站点路径下打开cmd控制台,输入 cnpm install --save-dev
- 在站点路径下打开cmd控制台,输入 cnpm install gulp-less --seve-dev 该命令就是less插件
- 在站点路径下打开cmd控制台,输入
cnpm install gulp --save-dev 关键命令!安装本地gulp
- 全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
6.创建gulpfile.js【很重要】
gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件。
上图(1)站点内容部署
上图(2)gulpflie.js
const gulp=require('gulp');//初始化gulp工具 const less=require('gulp-less');//初始化less插件 gulp.task('gulpLess',function () { gulp.src('myweb/**/*.less') .pipe(less()) .pipe(gulp.dest('websong')) }); //写监听执行命令 gulp.task('watch',function () { gulp.watch('myweb/**/*.less',['gulpLess']) ; });
解释几个点:
gulp.task()是创建动作的,相当于我们的函数。 gulp.src()方法就是将指定的路径文件拿到 pipe()方法就是连接的管道,文件从这里进入,一顿操作后从另一头输出到我们指定的一个地方。 gulp.dest()就是我们指定的文件目录。 gulp.watch()是监听,里面有两个参数,一个是监听的文件地址,
一个是监听到后要执行的动作,这个动作,放在数组里,逗号隔开,可以写入多个动作(任务);
目录里的**/*.*是node里的通配符
通配符:
*.scss
:*
号匹配当前目录任意文件,所以这里*.scss
匹配当前目录下所有scss文件**/*.scss
:匹配当前目录及其子目录下的所有scss文件。!not-me.scss
:!号移除匹配的文件,这里将移除not-me.scss*.+(scss|sass)
:+号后面会跟着圆括号,里面的元素用|分割,匹配多个
7.执行gulp 还是在wwww目录下,打开控制台,输入gulp 任务(动作)名称,这里是watch。 如果想终止命令 ctrl+c 或关闭控制台。 注意!任务执行后,控制台不可以关闭,否则没有效果哦
ok。到了这里,入门就说结束了。
更全更详细的可以参考这里,但是我这篇入门,是最适合小白不过了哦。
后面还有其他插件的,别忘了回来~~~~