前端自动构建工具Gulp入门
基于nodeJs;通过不同插件能自动完成一系列动作,比如压缩js/css/img、解析模版标签、解析less等;
一、安装gulp
- 安装nodeJs
- 打开Node.js command prompt
- 输入
npm install gulp -g
全局安装gulp - 在C盘根目录创建gulpTest文件夹
- 在命令行使用
cd c:/gulpTest
进入该文件夹 - 在该文件夹内创建文件package.json(后面会提及该文件作用),并输入
{"name":"projectName"}
,保存文件 - 下面开始输入命令局部安装gulp,并写入package.json:
npm install gulp --save-dev
- 安装完毕后,可以看到package.json中已经添加了依赖
经过以上步骤,已经在项目中安装了gulp
二、使用gulp插件压缩css
输入
npm install gulp-minify --save-dev
在项目根目录(c:/gulpTest/)创建gulpfile.js,输入以下代码并保存
var gulp = require('gulp'),
minifycss = require('gulp-minify-css');gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //设置要压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest('dest/css')); //输出到文件夹 }); gulp.task('default',function(){ //设置默认任务
gulp.start('minifycss');
}) gulp.watch('src/css/*.css', ['minifycss']);
在项目根目录创建文件src/css/index.css,随意输入一些css
在命令行输入
gulp
,即开始执行压缩,可以看到文件目录自动生成了压缩好的css文件dest/css/index.css;因为添加了watch,所以当文件发生改变时,gulp会自动压缩css。
三、gulp其他资料
前端自动构建工具Gulp入门的更多相关文章
- 前端自动构建工具@gulp入门
gulp是一个自动化的前端工具.它可以利用自身的插件来实现一些功能,如sass.less编译:浏览器自动刷新,文件压缩.重命名.代码校验(个人使用sublime的插件进行校验)等功能.当然这些功能也可 ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端开发构建工具gulp的安装使用
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...
- 自动构建工具Gulp
摘要: gulp与grunt一样,都是自动构建工具.和grunt相比它更突出一个流的概念,任务是一个接一个执行的.今天就分享如何用gulp做自动化. 安装: gulp也是基于node环境,所以安装g ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
随机推荐
- 6.关键字static
在java中并不存在全局变量的概念,但是我们可以通过static关键字来实现一个“为全局”的概念,在java中static表示“全局”和“静态”的意思,他可以用来修饰成员变量和方法,也可以用来修饰代码 ...
- ASP.NET Web API 框架研究 ASP.NET Web API 路由
ASP.NET Web API 核心框架是一个独立的.抽象的消息处理管道,ASP.NET Web API有自己独立的路由系统,是消息处理管道的组成部分,其与ASP.NET路由系统有类似的设计,都能找到 ...
- Windows核心编程:第7章 线程调度、优先级和关联性
Github https://github.com/gongluck/Windows-Core-Program.git //第7章 线程调度.优先级和关联性.cpp: 定义应用程序的入口点. // # ...
- 解决C#项目出现“此项目引用这台计算机上缺少的 NuGet 程序包。使用 NuGet 程序包还原可下载这些程序包。有关详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkID=322105。缺少的文件是 ..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props”
1.打开项目的.csproj文件 2.删掉如下选中的内容: 3.右键项目-->管理NuGet程序包(N) 找到Microsoft.CodeDom.Providers.DotNetCompiler ...
- Linux例行工作与系统管理(13)
Linux 系统的任务是由cron(crond)这个系统服务来控制的,Linux系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另外,由于使用者自己也可以设置计划任务,所以Linux ...
- 11_python_闭包迭代器
一.函数名(第一类对象) 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. def func(): print("呵呵") print(func) 结果: & ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- 简单线性回归问题的优化(SGD)R语言
本编博客继续分享简单的机器学习的R语言实现. 今天是关于简单的线性回归方程问题的优化问题 常用方法,我们会考虑随机梯度递降,好处是,我们不需要遍历数据集中的所有元素,这样可以大幅度的减少运算量. 具体 ...
- Color the ball(HDU1556)树状数组
每次对区间内气球进行一次染色,求n次操作后后所有气球染色次数. 树状数组,上下区间更新都可以,差别不大. 1.对于[x,y]区间,对第x-1位减1,第y位加1,之后向上统计 #include<b ...
- mongodb postgresql mysql jsonb对比
mongodb pg mysql jsonb对比 http://erthalion.info/2017/12/21/advanced-json-benchmarks/ 使用禁用jsonb列的压缩 AL ...