今天刚入职了一家新公司,结果明天就要开始项目了。上级说要用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快速入门的更多相关文章

  1. gulp快速入门

    gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目 ...

  2. gulp快速入门&初体验

    前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...

  3. 前端打包构建工具gulp快速入门

    因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受.不过不 ...

  4. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  5. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  6. OpenStack云计算快速入门之一:OpenStack及其构成简介

    原文:http://blog.chinaunix.net/uid-22414998-id-3263551.html OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助 ...

  7. Nginx快速入门菜鸟笔记

    Nginx快速入门-菜鸟笔记   1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...

  8. [.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门

    [.net 面向对象程序设计进阶] (2) 正则表达式 (一) 快速入门 1. 什么是正则表达式? 1.1 正则表达式概念 正则表达式,又称正则表示法,英文名:Regular Expression(简 ...

  9. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

随机推荐

  1. js中各种宽度高度总结

    offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 IE6.0.FF1.06+:offsetWidth = width + padding + borderoffsetH ...

  2. 50-ln 简明笔记

    为文件建立链接 ln [options] existing-file [new-link] ln [options] existing-file-list directory ln可以为一个或多个文件 ...

  3. 简单的解释XSS攻击

    XSS 跨站点脚本 cross site script 怎么造成攻击? 举例:有一个公共的页面,所有用户都可以访问且可以保存内容,输入的时候若输入<script>alert('I am h ...

  4. Java--剑指offer(4)

    16.输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. a)这里首先判断两个链表中有没有空表,这个就是依据表头是否为空.然后就是比较节点值的大小,然后就是使 ...

  5. Android Material Design 控件常用的属性

    android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...

  6. [转]Spring 注解总结

    原文地址:http://blog.csdn.net/wangshfa/article/details/9712379 一 注解优点?注解解决了什么问题,为什么要使用注解? 二 注解的来龙去脉(历史) ...

  7. iOS开发--利用MPMoviePlayerViewController播放视频简单实现

    一.MPMoviePlayerViewController和MPMoviePlayerController区分开,前者继承自NSObject,后者继承自UIViewController 二.MPMov ...

  8. Edge detection using LoG

    intensity梯度值分布跟图片的大小有关, 比如将一张小图片放大后会变得很模糊, 原先清晰的edge, 即大的梯度值变得模糊. 但是原有的边缘通常还是肉眼可分辨的. 但用Sobel 算子可能就检测 ...

  9. Maven-生命周期

    Maven的生命周期是为了对所有的构建过程进行了抽象了,便于统一. clean(清理) 此生命周期旨在给工程做清理工作,它主要包含以下阶段: pre-clean - 执行项目清理前所需要的工作. cl ...

  10. 数据库开发基础-SQl Server 变量、运算符、if、while

    变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...