安装 node.js

进入官网

下载最新稳定版,安装就好了

安装完成,看一下版本

安装 cnpm

npm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法就是cnpm

全局安装gulp

官网

创建目录结构

建立如下目录结构,learn-gulp 作为我们的项目根目录。

app 为工作目录,所有操作都在该目录下进行。gulp 检测到文件变动会自动对文件进行处理并分发至 dist 目录。

dist 目标文件目录,这里是编译、压缩过的文件。

release 可以发布至服务器的文件。

初始化npm软件包信息

这一步主要是创建一个 package.json 文件

安装 npm 软件包

通过命令 npm install package-name 安装 npm 软件包,建议带上 –save 参数,这样就会把你安装的软件都记录在 dependencies 字段下,便于分享你的开发环境给其他人。

关于 install 以及 –save 参数的相关信息请参考 NPM 入门 – 基础使用

这里使用cnpm命令:

构建 gulp 任务

安装完所有软件包后,在项目目录 learn-gulp 中新建一个javascript文件,命名为 gulpfile.js ,在该文件中定义任务

开始工作

运行 gulp 命令

如果没有异常 gulp 就已经开始工作了,浏览器会自动打开。

修改css

打开 learn-gulp/app/scss/main.scss 输入如下内容

当按下 Ctrl+S 保存时,sass 任务会自动执行,执行完成后 learn-gulp/dist/styles/ 目录下会生成css文件 main.css

修改html

打开编辑器在 learn-gulp/app/index.html 文件中输入下面内容

此时按下 Ctrl+S 后 learn-gulp/dist/ 下相应位置的 index.html 文件将被新版本替换,紧接着浏览器会自动显示最新效果。

作为一个后端,好奇驱使我把环境配置了一下,简直棒棒哒

感谢这位宝宝的分享

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注