【原】gulp快速入门
今天刚入职了一家新公司,结果明天就要开始项目了。上级说要用gulp来打包代码,所以今晚花了一晚来看这个gulp,
可以说已经入门了。所以做一个小小的总结 :
首先全局安装gulp
npm install gulp -g
然后我在F:/盘新建一个gulpDemo路径,
进入到这里面,在本地再次安装一次gulp,我也不知道为什么本地还要安装。你就装吧,哈哈
不过,在安装之前,确保 gulpDemo 这个文件夹里有package.json 这个文件
这个文件如下:
/package.json
{
"name": "xianyulaodi",
"version": "1.0.0",
"description": "this is a gulp",
"main": "",
"dependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
},
"devDependencies": {},
"scripts": {
"test": "gulp"
},
"keywords": [
"gulp"
],
"author": "xianyulaodi",
"license": " MIT"
}
在 gulpDemo 这个文件夹里再次安装gulp
C:\Users\>f:
F:\>cd gulpDemo npm install gulp --save-dev
gulpfile.js配置
在gulpDemo 这个根目录下新建一个 gulpfile.js
然后在cmd执行如下命令,安装一些插件:
C:\Users\>f:
F:\>cd gulpDemo npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save
gulpfile.js 内容如下:
var gulp =require("gulp");//创建 gulp模块
var uglify=require("gulp-uglify");//创建js混淆压缩 模块
var minify_css =require("gulp-minify-css"); //创建 css混淆压缩模块
var gulp_concat = require('gulp-concat'); //创建 文件合并模块
官方的API如下
**官方API** gulp.task(name[, deps], fn)
gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.watch(glob [, opts], tagulpsks)
先不用管,只需要知道有这四个属性就行
在 gulpDemo 目录里新建一个 src目录,里面有css文件夹,放一个test.css.
此外,还需要新建dist目录,里面有css文件
如:
gulpDemo
./src/css/test.css
./dist/css
接着在 gulpfile.js补充下面的代码
gulp.task('min-css',function(){ //1
gulp.src('./src/css/*.css') //2
.pipe(gulp_concat("main.min.css"))//3
.pipe(minify_css())//4.混淆即压缩
.pipe(gulp.dest('./dist/css'));//5.输出路径
});
在cmd里面执行 gulp min-css
在dis/css这个文件夹里,你就会发现有一个 mian.min.css, 这个就是 /src/css/test.css经过压缩之后的代码。
所以我们的用gulp打包测试成功
接下来逐一解释 1、2、3、4、5
1. gulp.task('min-css',function(){ }
第一个参数name
是自定义你的任务名称, 所以执行打包的命令是 gulp name, 比如我叫min-css,就gulp min-css 。我把min-css改为 xianyu,打包命令就为 gulp xianyu第二个参数[deps]是一个数组
,里面是你定义的其他任务的名称,这些任务会在本次定义的任务之前执行并完成
。第三个参数fn
是本次任务的回调函数。
2.gulp.src('./src/css/*.css')
官方API gulp.src(globs[, options])
'./src/css/*.css'
匹配同层路径下src目录下的css目录下的所有以.css结尾的文件
这个可以说是入口文件
3 .pipe(gulp_concat("main.min.css"))
pipe()
方法是正如字面意思理解的那样,把一个文件流输入,通过pipe管道输出,
所以打包之后的css名是 main.min.css
4 .pipe(minify_css())//混淆压缩js插件
什么意思呢,就是比如我的./src/css/有文件有多个文件,比如a.css,b.css,c.css,那么打包后所有的css会混淆在main.min.css中
5 .pipe(gulp.dest('./dist/css'));
就是我打包之后的css的输出路径;
到此为止,gulp快速入门就到此为止了
我们学会如何装gulp,如何安装gulp插件
。如何写gulpfile.js
配置文件
了解了gulp的3大APIgulp.src()
; gulp.task()
; gulp.dest()
推荐一篇博文,相当于是本文的升级版,
http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
【原】gulp快速入门的更多相关文章
- gulp快速入门
gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目 ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- 前端打包构建工具gulp快速入门
因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- OpenStack云计算快速入门之一:OpenStack及其构成简介
原文:http://blog.chinaunix.net/uid-22414998-id-3263551.html OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助 ...
- Nginx快速入门菜鸟笔记
Nginx快速入门-菜鸟笔记 1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...
- [.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门
[.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门 1. 什么是正则表达式? 1.1 正则表达式概念 正则表达式,又称正则表示法,英文名:Regular Expression(简 ...
- 快速入门系列--WebAPI--01基础
ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...
随机推荐
- js中各种宽度高度总结
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 IE6.0.FF1.06+:offsetWidth = width + padding + borderoffsetH ...
- 50-ln 简明笔记
为文件建立链接 ln [options] existing-file [new-link] ln [options] existing-file-list directory ln可以为一个或多个文件 ...
- 简单的解释XSS攻击
XSS 跨站点脚本 cross site script 怎么造成攻击? 举例:有一个公共的页面,所有用户都可以访问且可以保存内容,输入的时候若输入<script>alert('I am h ...
- Java--剑指offer(4)
16.输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. a)这里首先判断两个链表中有没有空表,这个就是依据表头是否为空.然后就是比较节点值的大小,然后就是使 ...
- Android Material Design 控件常用的属性
android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...
- [转]Spring 注解总结
原文地址:http://blog.csdn.net/wangshfa/article/details/9712379 一 注解优点?注解解决了什么问题,为什么要使用注解? 二 注解的来龙去脉(历史) ...
- iOS开发--利用MPMoviePlayerViewController播放视频简单实现
一.MPMoviePlayerViewController和MPMoviePlayerController区分开,前者继承自NSObject,后者继承自UIViewController 二.MPMov ...
- Edge detection using LoG
intensity梯度值分布跟图片的大小有关, 比如将一张小图片放大后会变得很模糊, 原先清晰的edge, 即大的梯度值变得模糊. 但是原有的边缘通常还是肉眼可分辨的. 但用Sobel 算子可能就检测 ...
- Maven-生命周期
Maven的生命周期是为了对所有的构建过程进行了抽象了,便于统一. clean(清理) 此生命周期旨在给工程做清理工作,它主要包含以下阶段: pre-clean - 执行项目清理前所需要的工作. cl ...
- 数据库开发基础-SQl Server 变量、运算符、if、while
变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...