gulp入门安装(1)

安装gulp的目的
gulp是前端开发项目构建构建工具,在开发过程中使用gulp可以避免重复的机械劳动,大大提高开发效率,比如:文件合并,文件拷贝,less编译,css压缩, js压缩,图片压缩等。
gulp常用地址:
  • gulp官方网址:http://gulpjs.com
  • gulp插件地址:http://gulpjs.com/plugins
  • gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md
1、 安装node.js
gulp基于node.js,需要配置node环境。在 node.js官网点击硕大的绿色Download按钮 下载最新版node安装包,安装包格式为msi。安装它就可以了(安装路径随意)
使用命令行
注:之后操作都是在windows系统下;
  • 打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):
  • 输入指令node -v 检测是否安装成功,若出现版本号表示安装已安装成功。
  • 输入指令npm -v 查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器。
  • cd定位到目录,用法:cd + 路径 ;ps:先不用执行这里,等全局安装gulp后再进入到指定的项目目录中。
  • dir列出文件列表;
  • cls清空命令提示符窗口内容。
gulp入门安装(1)_第1张图片
2. 全局安装gulp (默认c盘目录)
输入指令 npm install -g gulp
输入指令 gulp -v,出现版本号即为正确安装。
可以使用npm root -g查看全局安装目录.

注意:从这里开始cd进入自己建的项目文件夹中。
3. 新建package.json文件
注:package.json是一个普通json文件,所以不能添加任何注释。
输入指令 npm init
gulp入门安装(1)_第2张图片
4. 本地安装gulp
全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.
PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
输入指令 npm install --save-dev gulp
时间有点久,等进度条...
安装完成 我遇到了一些警告
gulp入门安装(1)_第3张图片

gulp入门安装(1)_第4张图片
(问过学长,他说已经装好了,不用管,然后继续下一步)

5. 本地安装gulp插件
定位目录命令后提示符执行 npm install --save-dev
  • 下面是一次性安装多个常用的gulp插件
    • 输入指令
    • npm install --save-dev browser-sync del gulp gulp-clean-css  gulp-html-replace gulp-plumber gulp-rename gulp-rev-collector  gulp-sass gulp-uglify gulp-concat gulp-rev node-sass run sequence
  • 也可以一次安装单个插件,本示例以gulp-less为例(编译less文件)
    • 输入指令npm install --save-dev gulp-less
6 . 建立gulpfile.js文件 (重要)(自己手动新建)
gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件。
此时我们的目录结构是这样子的:
├── gulpfile.js *新建
├── node_modules
│ └── gulp
└── package.json
gulpfile.js和package.json同级
更多插件配置请 查看这里

未完待续...
package.json

gulpfile.js
参考文章:
http://www.ydcss.com/archives/18#lesson2
http://www.cnblogs.com/2050/p/4198792.html
这是一篇讲述gulp使用中各种坑的文章,先存起来 http://www.qiqiboy.com/post/61

这篇讲述了文件的目录 https://segmentfault.com/q/1010000003062308?_ea=303623

你可能感兴趣的:(gulp入门安装(1))