我用的是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)的更多相关文章

  1. gulp自动化构建工具的使用

    gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...

  2. gulp自动化构建工具

    gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ...

  3. Gulp(自动化构建工具 )

    前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp ...

  4. Visual Studio Code初识与自动化构建工具安装

    1.Visual Studio Code如何新建文件夹 要自己手动在本地新建,然后再点击文件->打开文件夹即可. 之后你就可以任意添加文件了 2.如何使用自动化构建工具 通过自动化构建工具,用户 ...

  5. gulp自动化构建工具使用总结

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  6. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

  7. gulp自动化构建工具使用

    gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...

  8. 前端自动化构建工具gulp的使用总结

    前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...

  9. gulp前端自动化构建工具使用

    (1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...

随机推荐

  1. SQL----Scalar 函数

    UCASE() 函数 UCASE 函数把字段的值转换为大写. SQL UCASE() 语法 SELECT UCASE(column_name) FROM table_name SQL UCASE() ...

  2. 学习笔记--APIO 2018 二分专题 By wuvin

    前言: 在APIO 2018 Day2下午听wuvin讲二分,听了一上午的神仙,现在终于有可以听懂了. 专题: 平均边权最大 题目链接:https://www.questoj.cn/problem/3 ...

  3. Hadoop网页监控配置

    接之前的内容http://www.cnblogs.com/jourluohua/p/8734406.html 在之前那的内容中,仅实现了Hadoop的安装和运行,距离实际使用还有很远.现在先完成一个小 ...

  4. java中的compareto方法的详细介绍

    java中的compareto方法的详细介绍 Java Comparator接口实例讲解(抽象方法.常用静态/默认方法) 一.java中的compareto方法 1.返回参与比较的前后两个字符串的as ...

  5. Chrome去掉标签页8个框

    最终效果: 解决思路: 在标签页鼠标右击弹出的菜单项中存在“查看页面源码”一项,由此可确定chrome的标签页是由一个html页面控制的,只要修改其页面源码便能去掉8个框. 经网上查阅确定了标签页的源 ...

  6. h5唤醒App

    一.应用场景 用户在访问我们的网页时,判断出这个用户手机上是否安装了我们的App,如果安装了则直接从网页上打开APP,否则就引导用户前往下载,从而形成一个推广上的闭环.这里只针对从网页端打开本地APP ...

  7. 【CF 482E】ELCA

    题意 题解 50pts 由于这题 \(2s\),所以可以信仰一波,暴力修改.查询. 暴力修改的复杂度是 \(O(n)\),暴力查询的复杂度是 \(O(n^2)\). 但不难发现可以通过记录子树大小来优 ...

  8. poj3666/CF714E/hdu5256/BZOJ1367(???) Making the Grade[线性DP+离散化]

    给个$n<=2000$长度数列,可以把每个数改为另一个数代价是两数之差的绝对值.求把它改为单调不增or不减序列最小代价. 话说这题其实是一个结论题..找到结论应该就很好做了呢. 手玩的时候就有感 ...

  9. 【洛谷P3128】Max Flow

    题目大意:给定一棵 N 个节点的无根树,有 M 个操作,每次选定一条树链,将这条链上所有点的点权 +1,最后求树上点的最大点权是多少. 题解:树上差分算法的应用. 发现操作有 M 次,但是询问只有一次 ...

  10. 在vue2.0中使用bootstarpTable(jquery+bootstarp+bootstarpTable)

    ​ 要想使用bootstarp-table就需要按顺序引入 jquery > bootstarp > bootstarp-table //路径可能会有变动 最好在node_modules ...