使用gulp 完成前端自动化
来源:互联网 发布:卢松松博客大全源码 编辑:程序博客网 时间:2024/05/17 22:00
刚出来实习,刚开始第一个项目就被深深的伤害到了,项目进度缓慢,在一些很琐碎的地方耗费了大量时间,就写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 initThis 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 fieldsand exactly what they do.Use `npm install <pkg> --save` afterwards to install a package andsave 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 自动刷新页面
- 使用gulp 完成前端自动化
- 使用gulp实现前端自动化
- 使用Gulp构建前端自动化
- Gulp前端自动化之 ejs插件使用
- 使用gulp来自动化部署前端项目
- 使用Gulp构建前端自动化解决方案
- 前端工程自动化--gulp的使用
- Linux前端自动化gulp安装与使用
- 关于前端自动化gulp的入门使用
- 前端自动化之--gulp
- 前端自动化gulp
- 前端自动化神器-gulp
- Gulp 前端自动化工具
- gulp-前端简单自动化
- Gulp前端自动化工具
- gulp前端自动化构建工具:常用插件介绍及使用
- 安装gulp前端自动化工具
- gulp 与 前端流程自动化
- Android Studio 导入各种形式的三方库
- VB.NET机房重构问题点滴积累
- 今天第几天
- 不完全node实践教程-第五发
- 概率论部分整理
- 使用gulp 完成前端自动化
- 介绍 JSON
- 第一次注册csdn博客
- 5-31笛卡尔树(25 分)
- mysql学习之1——mysql不同引擎的区别
- C++new实现机制
- scrollview嵌套listview运行后最先显示出来的位置不在顶部而是中间问题
- 21届BQConf中国软件质量大会(西安)总结
- mysql学习之2——mysql索引