【前端自动化】Gulp的使用(一):安装gulp
作为一个.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的更多相关文章
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 前端自动化-----gulp详细入门(转)
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- npm(cnpm)介绍(安装gulp)
1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...
- 前端自动化开发之grunt
上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...
- 前端自动化之sass实时编译及自动刷新浏览器
gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下 ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
- 安装并配置前端自动化工具-gulp
由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
随机推荐
- Oracle的控制文件和日志文件
--什么是控制文件 控制文件是数据库的一个二进制文件,它主要记录数据库的名称. 数据库的数据文件存放位置等信息. 一个控制文件只能属于一个数据库.如果控制文件丢失,这数据库就无法操作. --下面查询语 ...
- Linux中redis主从配置
假设要在6380开启redis 1.添加配置文件:复制redis.conf为redis_6380.conf 2.修改配置文件:修改redis_6380.conf中port.pidfile 3.防火墙: ...
- POJ 1258 Agri-Net(Prim算法)
题意:n个农场,求把所有农场连接起来所需要最短的距离. 思路:prim算法 课本代码: //prim算法 #include<iostream> #include<stdio.h> ...
- Python基础-redis模块使用
redis是一个数据库,他的数据全都是存放在内存里面的,redis每秒能支持30w次的读写,存放有两种格式,一种string类型,一种是hash类型 一,操作string类型 r=redis.Redi ...
- 如何更好的理解js中的this,分享2段有意思的代码
关于js中this的浅析,大家可以点击[彻底理解js中this的指向,不必硬背]这篇博客了解. 今天遇到2段比较有意思的代码. ----------------第一段----------------- ...
- Cookie是以文本文件保存在客户端的,所以说cookie对象从本质而言是 字符串,所以取值时用字符串,或其数组
- STL memory.cpp
memory.cpp # // Filename: memory # # // Comment By: 凝霜 # // E-mail: mdl2009@vip.qq.com # // Blog: ht ...
- 机器学习 Support Vector Machines 2
优化的边界分类器 上一讲里我们介绍了函数边界和几何边界的概念,给定一组训练样本,如果能够找到一条决策边界,能够使得几何边界尽可能地大,这将使分类器可以很可靠地预测训练样本,特别地,这可以让分类器用一个 ...
- FFMPEG实现的转码程序
本例子是由FFEMPG的doc/example例子transcode.c修改而来,可以根据需求任意转换音视频的编码. 原来的例子的作用更类似于remux,并没有实现转码的功能,只是实现了格式转换,比如 ...
- 幻想乡三连B:连在一起的幻想乡
$G[k][x]$表示所有$x$个点的无向图中每一个图的边数的$k$次方之和. $F[k][x]$就是在$G[k][x]$的基础上加了一个整体连通的性质. 有一个经典的套路就是对于$F$在对应的$G$ ...