gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正。
好了,废话少说,反正也就是随手捣腾。下雨了,天晴了,我们开始搞gulp了
安装:gulp是个构建前端自动化的工具,现在的前端太牛逼,不搞点自动化都不好意思说自己弄过前端。
gulp是基于NodoJs的,怎么说也是个服务,没有服务端的支持是跑不起来的,所以,接下来我们要先安装npm.
npm是Nodejs的包管理工具,至于什么叫Nodejs的包管理工具,自行谷哥度娘
首先去https://nodejs.org/en/ 下载安装Nodejs的安装包,当然了,直接小黑窗下载更牛逼。
因为npm是外国的,所以很多时候我们下载会遇到链接超时或者断开的情况,针对这种情况我们可以改用cnpm,除了使用cnpm来做命令行标识符外其他跟npm没什么差别,淘宝团队弄的,详情参见https://fengmk2.com/blog/2014/03/node-env-and-faster-npm.html
在我们安装好npm以后,我们开始就开始安装gulp:
打开小黑窗,然后输入 npm install -g gulp 安装gulp到全局。安装完毕后,可以用 gulp -v 来查看版本来确定是否已经安装成功。
如果以上都没有问题,那么我们就可以开始试着使用Gulp:
在小黑窗里进入到你的项目文件夹,然后执行
npm install --save-dev gulp
上面的下载是到全局,这里的是为你的项目下载到本地
然后再创建一个叫做gulpfile.js的gulp配置文件,在文件里输入如下代码:
var gulp=require("gulp"); gulp.task('task-name',function(){
console.log("Hello,Gulp!");
});
保存完毕后在执行 gulp task-name 就可以看到窗口输入Hello,Gulp!
至此,我们的Gulp安装使用初步完成!!!!
好吧,其实真的是完成了,我们只是说安装跟使用,又没说搞定一个自动化流程。
Gulp是依赖于插件的,相当于一个包,一个壳子,不做处理功能的。
接下来,我们进行进一步的学习~~
gulp自动化构建工具安装使用(1)的更多相关文章
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- Visual Studio Code初识与自动化构建工具安装
1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...
- gulp自动化构建工具使用总结
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp自动化构建工具的简单使用
相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...
- gulp自动化构建工具使用
gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
随机推荐
- Java后端技术面试汇总(第五套)
1.Java相关 • 乐观悲观锁的设计,如何保证原子性,解决的问题:• char和double的字节,以及在内存的分布是怎样:• 对象内存布局,然后讲下对象的死亡过程?• 对象头,详细讲下:• syn ...
- node.js学习之路(1)
node.js 属于后台语言,后台语言还有php,java等. 优势:1.性能好 node.js VS php 86倍 2.跟前台JS配合方便 3.node.js便于前端学习 https:// ...
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- java对象只有值传递,为什么?
在开始深入讲解之前,有必要纠正一下大家以前的那些错误看法了.如果你有以下想法,那么你有必要好好阅读本文. 错误理解一:值传递和引用传递,区分的条件是传递的内容,如果是个值,就是值传递.如果是个引用,就 ...
- mysql5.7主从复制及相关注意点!
首先在两台不同IP的服务器安装相同版本的mysql(也可以docker 用 network模式).例如 主数据库(master) 178.18.0.2 my.cnf的设置(一般在/etc/mysql/ ...
- c++ 实时通信系统(c++socket篇)
在上一篇简单的介绍了TCP/IP协议,在这一篇我们主要介绍socket的具体实现的函数 第一步首先我们套添加上头文件:(#pragma comment(lib, "WS2_32") ...
- 安装驱动模块ko
1. make install 2. 3.手动加载驱动程序 [root@localhost template]# modprobe usbnet [root@localhost template]# ...
- 第08课:【实战】Redis网络通信模块源码分析(1)
我们这里先研究redis-server端的网络通信模块.除去Redis本身的业务功能以外,Redis的网络通信模块实现思路和细节非常有代表性.由于网络通信模块的设计也是Linux C++后台开发一个很 ...
- Java-20180419
1.leetcode第二题 给定两个链表,逆序转换为数值相加,在逆序输出新链表. Input: (2 -> 4 -> 3) + (5 -> 6 -> 4)Output: 7 - ...