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组件及打包文件路径和打包任 ...
随机推荐
- 常用CSS代码大全(工作必备)
用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用. 一.文本设置 ...
- 一份非常完整、详细的MySQL规范
一.数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名 ...
- 主流浏览器内核(IE、Chrome、Firefox、Safari、Opera)
IE浏览器,使用Trident浏览器内核,又称为IE内核.只用于Windows平台,而且并不是开源的: chrome浏览器,目前使用的是Blink浏览器内核.浏览器内核的演进过程:Chromium ...
- PPT中准确插入公式
Mathtype直接输入到PPT中的公式,漂移且太小.一般的文本公式不美观. 将Mathtype的公式作为文本形式出现,既解决了漂移和大小的问题,也兼顾的美观. 具体操作如下: 1 打开Mathtyp ...
- 2.bat文件的基本用途
一.调用可执行的jar文件. 详见:https://www.cnblogs.com/lukelook/p/8683352.html
- ERROR qos-server can not bind localhost:22222
dubboe版本2.7.1 spring cloud alibaba最新官网examples 根据readme中说明文档依次启动 1.nacos,默认用户名密码nacos/nacos 2.启动spri ...
- 关于spring读取配置文件的两种方式
很多时候我们把需要随时调整的参数需要放在配置文件中单独进行读取,这就是软编码,相对于硬编码,软编码可以避免频繁修改类文件,频繁编译,必要时只需要用文本编辑器打开配置文件更改参数就行.但没有使用框架之前 ...
- dedecms body 输出自动替换结果。
{dede:field.body function='str_replace("张三","李四",@me)'/} body内容中的张三全部换成了李四
- google的CacheBuilder缓存
适用性: 计算或检索一个值的代价很高,并且对同样的输入需要不止一次获取值的时候,就应当考虑使用缓存. 常用用法: LoadingCache<Key, Graph> graphs = Cac ...
- poj3666/CF714E/hdu5256/BZOJ1367(???) Making the Grade[线性DP+离散化]
给个$n<=2000$长度数列,可以把每个数改为另一个数代价是两数之差的绝对值.求把它改为单调不增or不减序列最小代价. 话说这题其实是一个结论题..找到结论应该就很好做了呢. 手玩的时候就有感 ...