gulp入门安装(1)
来源:互联网 发布:煤矿大数据 现状 编辑:程序博客网 时间:2024/06/03 16:19
安装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清空命令提示符窗口内容。
2.全局安装gulp(默认c盘目录)
输入指令npm install -g gulp
输入指令gulp -v,出现版本号即为正确安装。
可以使用npm root -g查看全局安装目录.
注意:从这里开始cd进入自己建的项目文件夹中。
3.新建package.json文件
注:package.json是一个普通json文件,所以不能添加任何注释。
输入指令npm init
4.本地安装gulp
全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.
PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
输入指令npm install --save-dev gulp
时间有点久,等进度条...
安装完成 我遇到了一些警告
(问过学长,他说已经装好了,不用管,然后继续下一步)
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同级
更多插件配置请查看这里。
未完待续...
参考文章:
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
阅读全文
0 0
- gulp入门安装(1)
- gulp入门(1)- gulp安装
- 【工具】gulp入门安装
- Gulp入门安装及运行gulp
- Gulp入门:从安装到编译Sass
- gulp开发:gulp入门
- gulp入门~
- Gulp入门
- Gulp入门
- gulp入门
- gulp入门
- gulp入门
- gulp 入门
- gulp 入门
- gulp入门
- gulp入门
- gulp入门
- gulp入门
- 解决Tomcat端口冲突问题
- 关于java中的try-catch-finally语句和return
- java的io(1)---字节流总结
- 阿里云优惠码-如何领取阿里云优惠码及使用
- js特性
- gulp入门安装(1)
- SpringBoot的 Hello World
- 在vultr上使用ubuntu搭建ss
- Gson解析小技巧——解析数组json字符串——一行代码搞定
- log4j
- vscode和stylus通用配置方案
- 总是小情绪,如何扛起责任
- json数据解析获取全国城市并且添加到数据库中(mavean、城市接口)
- JavaScript---ajax为什么要设置requestHeader