文档章节

Gulp

大仁孙
 大仁孙
发布于 2016/07/15 11:58
字数 626
阅读 18
收藏 0

date: 2016-05-16 16:08:19

特点:

  • 易于使用:通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

  • 构建快速:利用 Node.js 流的威力

  • 插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

  • 易于学习:通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

使用指南:

1.创建项目文件夹(如gulp):

 mkdir gulp

2.全局安装gulp:

 $ npm install -g gulp

3.项目的开发依赖(devDependencies)安装:

 $ npm install  gulp --save-dev    

4.在gulp文件夹下创建一个名 gulpfile.js(打包工具) 的文件

 var gulp = require('gulp');

 gulp.task('default', function() {
 // 将你的默认的任务代码放在这
 });	 

5. 运行 gulp:

$ gulp/gulp default
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。想要单独执行特定的任务(task),请输入 gulp <task> <othertask>。

可以做些什么?可看下文练习展示

var concat = require('gulp-concat');    合并文件 
var jsmin  = require('gulp-jsmin');     js文件压缩   
var htmlmin  = require('gulp-htmlmin'); html文件压缩
var cssmin  = require('gulp-cssmin');   css文件压缩,库里也许查不到,但可以使用
var less  = require('gulp-less');       
var jade  = require('gulp-jade');

一个项目如何构建清晰易读的文件夹?

1.文件夹创建与初始化:

简单说明:

  • desk: 放置压缩的文件夹,里面的html/css/js是通过终端的处理,传递过来的压缩文件
  • node_modules: 项目的开发依赖(devDependencies)安装 $ npm install gulp --save-dev
  • public: 第三方的内容,多为压缩版的插件
  • src:原生的js/css放在此处,便于维护。
  • view:原生html放置的地方(可以使用.jade)
  • gulpfile.js:手动创建,名称必须,不可更改
  • package.json:初始化project文件夹 $ npm init

2.以上做完就可以按项目需求引入gulp插件

终端project里执行黄线2条命令后生成左边圈出的内容,其他同理!!!

3.练习展示:

a. concat和jsmin结合运用:
此处concat和jsmin引入与上文less、jade同理
图1

图2

b. less和jade综合运用:

简要说明:
  • src 里index.less运用less语法输入
  • src 里index.js,由于本人后期引入了jquery.js,故可以用$形式输入
  • view 里index.jade运用jade语法输入

参考内容:Gulp官网

© 著作权归作者所有

上一篇: js中==与===的区别
下一篇: 瀑布流
大仁孙
粉丝 3
博文 35
码字总数 26287
作品 0
虹口
前端工程师
私信 提问
加载中

评论(1)

大仁孙
大仁孙 博主
13
gulp常用插件大全

编译 gulp-sass - 通过 libsass将Sass编译成 CSS gulp-ruby-sass - 通过 Ruby Sass将Sass编译成CSS gulp-compass - 通过 Ruby Sass和CompassSass编译成CSS gulp-less - Less编译成 CSS. gul......

bug_killer
2017/12/22
0
0
gulp常用插件及其使用(更新2016-05-19)

一些常用的gulp插件 gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些常用的插件。 1 重命名 使用gulp-rename安装:npm install --save-dev gulp-rename用来重命名...

WolfX
2016/05/12
1K
0
gulp 使用初解

gulp gulp是基于Node.js的前端自动化构建工具,主要用于代码打包。目前主流的前端打包工具,grunt,gulp,webpack。grunt现在似乎慢慢被gulp取代,而我使用gulp也是冲着大家说的配置简单去的...

天风霁月
2016/03/02
3.1K
14
前端自动化构建工具gulp的使用介绍

gulp是基于流的自动化构建工具 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具...

jywud
2016/05/14
155
0
gulp

平常项目里用到的 简单设置 var gulp = require('gulp'); var commonPathPrefix = 'public/'; //需要编译的公共目录 //var imagemin = require('gulp-imagemin'); //var pngquant = require(......

kore_wang
2016/07/13
55
0

没有更多内容

加载失败,请刷新页面

加载更多

【0911】linux软件包安装和卸载

【0911】linux软件包安装和卸载 一、安装软件包的三种方法 1、rpm工具:与win中的exe安装包类似,红帽子公司包管理系统 2、yum工具:属于一种用python开发的工具,支持自动的安装依赖的包 3、...

飞翔的竹蜻蜓
20分钟前
3
0
【外行学IT】手机网页自适应之rem和viewport

在写手机网页时,对于像素的问题会非常困惑,初学者很多时候会因为那么一个小点的问题解决不了,或者无法理解透彻就放弃了学习。 我在学习写手机网页时也困惑了许久,出现过下面的问题: 图片...

前端老手
31分钟前
5
0
三、Java设计模式之单一职责原则

定义:不要存在多于一个导致类变更的原因。 一个类、接口、方法只负责一项职责 优点:降低类的复杂度、提高类的可读性,提高系统的可维护性、降低变更引起的风险

东风破2019
38分钟前
4
0
搭建高可用MongoDB集群(分片)

搭建高可用MongoDB集群(分片) KaliArch关注1人评论28269人阅读2017-12-04 21:57:41 MongoDB基础请参考:https://blog.51cto.com/kaliarch/2044423 MongoDB(replica set)请参考:https:/...

linjin200
58分钟前
6
0
Pandas DataFrame创建方法大全

Pandas是Python的数据分析利器,DataFrame是Pandas进行数据分析的基本结构,可以把DataFrame视为一个二维数据表,每一行都表示一个数据记录。本文将介绍创建Pandas DataFrame的6种方法。 创建...

汇智网教程
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部