Gulp | 易学教程

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官网

来源：oschina

链接：https://my.oschina.net/u/2845173/blog/712250

标签

gulp