作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html  css   jquery,

现在去面试,人家关注的是什么,HTML5? CSS3? nodeJs? angularJs?  grunt? gulp? 有没有前端自动化经验。 瞬间一脸懵逼,技术的更新换代是很快的,作为一个技术人员当然不能

死在时间的长河。回到家慢慢整理思绪,将自己的学习历程记录在此。

什么是Gulp

官方的描述:基于文件流的构建系统。 那么他能为我们做什么呢?

1.性能优化:代码的压缩合并,图片的压缩,是资源大大减小体积提升加载速度

2.效率提升:单元测试,代码分析,js与css的依赖问题等等

以上只是列出了前端构建最常用的一些功能,后面将详细讲讲如何使用Gulp这个神器来一一解决我们上面提到的问题。

安装Gulp环境

1.安装nodeJs

gulp基于node.js,要通过nodejs的npm安装gulp,所以先要安装nodejs环境

2.全局安装gulp

确保安装了nodeJs的前提下,用命令的方式安装gulp

npm install gulp -g

此图就是安装成功

3.在项目中安装Gulp

在当前项目文件下面输入指令

npm  install gulp --save -dev

此时我们需要两个文件

package.json   gulpfile.js

继续在当前项目下输入指令会生成 package.json文件

npm init

然后创建gulpfile.js文件

此时gulp已安装完成

 

【前端自动化】Gulp的使用(一):安装gulp的更多相关文章

  1. 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...

  2. 前端自动化-----gulp详细入门(转)

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

  3. 前端自动化构建工具-gulp

    gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...

  4. npm(cnpm)介绍(安装gulp)

    1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...

  5. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  6. 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...

  7. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  8. 安装并配置前端自动化工具-gulp

    由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...

  9. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

随机推荐

  1. docker仓库及数据卷

    docker help rmi, 删除本地镜像 docker run -it --name=centos centos:latest /bin/sh  --name的选项可以方便我们以后引用此imag ...

  2. java原生数据类型和引用类型

    java 中String 是个对象,是引用类型基础类型与引用类型的区别是,基础类型只表示简单的字符或数字,引用类型可以是任何复杂的数据结构基本类型仅表示简单的数据类型,引用类型可以表示复杂的数据类型, ...

  3. 数据分析第二篇:matplotlib 常用的几个绘图方法

    Matplotlib matplotlib是python的绘图库,使用它可以很方便的绘制出版质量级别的图形 matplotlib的基本功能 1.基本绘图 1.1 绘制坐标系中连续的线,设置线型/线宽/ ...

  4. php.ini中的session配置说明

    下面介绍能让session运行的必要配置步骤 手动配置PHP运行环境时,最容易遗忘的一项是服务器端session文件的存储目录配置工作,打开php.ini文件,搜索Session,找到session. ...

  5. 【python】关于函数递归使用 return 后,收到数据为 None。

    在写一个辗转相除求最小公因数的程序的时候,突然发现自己不管怎么写(除了两数恰巧可以整除),return 返回的值恒为 none. 代码为此: def gcd(a,b): if a%b==0: retu ...

  6. django中使用多个数据库,跨库查询

    一.settings配置多个数据库 DATABASES = { 'default': { # 'ENGINE': 'django.db.backends.mysql', 'ENGINE': 'comm ...

  7. linux命令学习笔记(6):rmdir 命令

    今天学习一下linux中命令: rmdir命令.rmdir是常用的命令,该命令的功能是删除空目录,一个目录 被删除之前必须是空的.(注意,rm - r dir命令可代替rmdir,但是有很大危险性.) ...

  8. Arc071_F Infinite Sequence

    传送门 题目大意 给定一个数$n$,构造一个无限长的序列$A$,使得 $\forall i,j\geq n,A_i=A_j$ $\forall i<j<k\leq i+a_i,A_j=A_ ...

  9. DOM基础知识整理

    --<JavaScript高级程序设计>Chapter10学习笔记 一.节点层次 1.Node类型 1)(Node).nodeType属性 节点nodeType属性有12种. 检测node ...

  10. python 3中对list进行sort时,返回值为None

    进行在用python的list结构时, 发现一个问题: methods = [&apos;blogger.deletePost&apos;, &apos;blogger.get ...