使用gulp 完成前端自动化

刚出来实习，刚开始第一个项目就被深深的伤害到了，项目进度缓慢，在一些很琐碎的地方耗费了大量时间，就写css时: 量像素->切换到sublime编辑器->写css->刷新页面->再切换..泪奔，入了前端的坑啊..

前两天在网上看到gulp这个神器,照着教程怎么都无法成功，Σ(｀д′*ノ)ノ，后来发现是教程太老了！！浪费了好多时间，找了一天终于找到完整的了，把学习笔记分享出来咯( ╯▽╰)

安装node.js

node.js这个神器大家都知道吧，到网上下载就ok了，安装成功后在命令提示符工具中输入:

node -v

界面提示nodejs的版本号表示安装成功。

GIT

git是一款版本控制工具，在这篇博客中是用不到版本控制的，使用git只是单纯的使用他的命令行。

网上有git的安装教程，可以到网上搜索╮(╯_╰)╭。（等我把git学完了也会单独写几篇blog吧)

创建项目根目录

直接右击鼠标，选择 git bash 打开git版本控制器

这里写图片描述

git bash 会自动获取你的当前选择的文件夹路径。

初始化项目配置

在git 界面输入 npm init ,初始化项目：

npm init

接着会弹出提示，要求设置项目名称，版本号，描述，关键字等等。你可以一路回车，也可自己设定这些值

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp)   //这里要求输入项目名称，如果不输入则使用文件夹名称gulp当做项目名称,一下各项都是如此。
version: (1.0.0) //这里要求输入版本号
description:  //项目描述
entry point: (index.js) //项目入口
test command: //测试
git repository: //版本库
keywords: //关键字
author: //作者
license: (ISC) //许可
About to write to C:\Users\Administrator\Desktop\gulp\package.json: //成功后创建一个packsge.json的文件

//这里就是项目配置的内容（start）
{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
//这里就是项目配置的内容（end）

Is this ok? (yes) y //是否完成？这里输入yes就行了

安装gulp

gulp 需要安装两次，一次是全局的，一次是当前项目文件夹的，

如果，网速很慢下载不下来，可以使用cnpm 下载，具体百度=￣ω￣=

npm install gulp -g  //全局gulp,在git中输入 gulp -v 显示gulp版本号，表示安装成功。

npm install gulp --save-dev  //当前文件夹下安装

安装完成后，会发现根目录下多了个 node-modules 文件夹，安装好的 gulp 就在这里了，

package.json文件中也多了一个 “devDependencies” 依赖项 gulp”: “^3.9.1”

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {  //增加的依赖项，表示当前项目依赖这个文件
    "gulp": "^3.9.1"  //被依赖的gulp 文件，后面显示版本号
  }
}

完成

关于前端自动化的项目创建以及一些简单配置，gulp的安装以及完成，接下来是使用gulp-sass 编译 sass 文件以及

用gulp-livereload 自动刷新页面

林楠力

发布了25 篇原创文章 · 获赞 31 · 访问量 11万+

私信关注