gulp工程化

gulp工程化：

    它是一个工程化工具。同时也是一个Node第三方模块。

安装：    需要两次

第一次： 全局安装

    npm install -g gulp

作用： 将gulp所在的目录放在了系统的环境变量中，可以在任意地方去调用gulp命令。

第二次： 在需要运行的项目目录下安装一次

     npm install gulp

作用： 提供gulp的功能

使用：

在该目录下，创建一个文件名为gulpfile.js的文件（文件名必须是gulpfile.js 默认从该文件执行），在内部书写代码。

引入模块：var gulp = require("gulp");    ,后续调用方法。

配置文件名： gulpfile.js

使用方式：

    1. 引入gulp  

        var gulp = require("gulp");

    2. 定义任务

        gulp.task(xxx, function() {

           定位资源

           第一阶段任务

           第二阶段任务

           ……

        })

    3 定义默认任务

        gulp.task("default", [xxx])

        其中，default是特殊的。它所指定的任务会被先执行。

gulp工程化的基本方法：

1. src：用于锁定目标文件

输出符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个文件的流形式（stream）它可以被pipe（）方法到别的地方中。将物理文件转换成流文件

注：流stream内存中是流的形式 硬盘中是文件的形式

三种使用方式：

    （1）gulp.src(字符串)

    （2）gulp.src(数组)

            数组中是多个字符串，每一个字符串都是一个文件路径

    （3）gulp.src(glob表达式)

gulp.src(glob,options)

参数：

    glob：数组array（一个存放文件路径的glob表达式的数组） 或者 字符串string（文件路径的glob表达式）

    options：额外选项参数 可选

        options.base    类型： String 默认值： 将会加在 glob 之前 

// 一个路径为client/js/somedir的目录中，有一个somefile.js文件 gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/` .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base: 'client' }) .pipe(minify()) .pipe(gulp.dest('build')); // 写入 'build/js/somedir/somefile.js'

2. dest：用于发布到某一个文件夹下

能被 pipe 进来，并且将会写文件。并且重新输出所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。将流文件转换成物理文件

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates')); gulp.dest(path,options)

参数：

    path：String or Function文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径。

    options：额外选项参数 可选

3. task 用于定义任务

    默认会先从任务名称为default的任务开始执行

// 定义默认任务 gulp.task("default", ["xxx"]);

（1） gulp.task(name，function)

        name： 任务名称

        function： 任务函数（任务执行的内容）通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.task('somename', function() { // 做一些事 });

（2） gulp.task(name，list，function)

        name： 任务名称

        list： 任务列表： 数组 数组中的每一项都是一个任务名称

        function： 任务函数（任务执行的内容）通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 做一些事 });

4. pipe：用于定义任务阶段内容

gulp.pipe(function)

参数：

    function：任务函数（任务执行的内容）可以是任意内容 但是一般是插件

5. watch: 用于监听某一个(些)文件的状态

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

（1）gulp.watch(glob[, opts], tasks)

    glob:  

        类型：String or Array

        一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

    opts  额外选项 可选

        类型： Object

    tasks

        类型： Array

        需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']); watcher.on('change', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });

（2）gulp.watch(glob[, opts, cb])

    glob

        类型： String or Array

        一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

    opts 额外选项 可选

        类型： Object

    cb(event)

        类型： Function

        每次变动需要执行的 callback。

gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

    event.type

        类型： String

        发生的变动的类型：added, changed 或者 deleted。

    event.path

        类型： String

        触发了该事件的文件的路径。

glob表达式

globs是用于路径的一种特殊表达式。

组成成员很少： * 、 ** 、 [] 、 [^] 、 ？

*： 表示任意名称 不包含/ 只表示“一层”的意思

    ex: origin/*.js => origin目录下所有的js文件

    包含origin/a.js

    不包含origin/js/jquery.js

**： 表示任意路径 包含/ 表示多层的一次

    ex: origin/**/*.js => origin目录下的所有js文件

    包含origin/a.js

    包含origin/js/jquery.js

[]: 表示从[]中选择一个的意思。

    ex: origin/a[bcd]e.jpg

    包含origin/abe.jpg  origin/ace.jpg  origin/ade.jpg

[^]: 表示不能有[]里面的意思

    ex: origin/a[^bcd]e.jpg

    不包含origin/abe.jpg  origin/ace.jpg  origin/ade.jpg

? : 表示任意的意思 但是只有一个

    ex: origin/a?e.jpg

    包含origin/abe.jpg  origin/ace.jpg  origin/ade.jpg  origin/afe.jpg

    不包含origin/abbe.jpg

用npm中下载有关于gulp的插件

1. gulp-rename 重命名插件

下载： npm  install gulp-rename

使用： 先引入再使用

var rename = require("gulp-rename"); gulp.task("taskName", function() { gulp.src("xxxx").pipe(rename(path | obj)).pipe(gulp.dest("xxx/xxx")) })

参数：

path 改名之后的名称（string）/  path函数 （function）/  obj 改名规则对象

当参数使用obj 改名规则对象时，配置参数：

    dirname: 所在目录

    basename: 文件名

    extname: 拓展名（带.）

    prefix: 前缀

    suffix: 后缀

var rename = require("gulp-rename"); // rename via string gulp.src("./src/main/text/hello.txt") .pipe(rename("main/text/ciao/goodbye.md")) .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md // rename via function gulp.src("./src/**/hello.txt") .pipe(rename(function (path) { path.dirname += "/ciao"; path.basename += "-goodbye"; path.extname = ".md"; })) .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md // rename via hash gulp.src("./src/main/text/hello.txt", { base: process.cwd() }) .pipe(rename({ dirname: "main/text/ciao", basename: "aloha", prefix: "bonjour-", suffix: "-hola", extname: ".md" })) .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

2. gulp-uglify 压缩JS文件

下载： npm  install gulp-uglify

使用： 先引入再使用

// 引入gulp var gulp = require("gulp"); // 引入压缩JS的模块插件 var uglify = require("gulp-uglify"); //定义任务 gulp.task("hasagi", function() { // 定位资源 gulp.src("origin/jquery-1.7.2.js") // 启用压缩功能 .pipe(uglify({ mangle: false })) // 发布到publish文件夹下 .pipe(gulp.dest("./publish")) }); // 定义默认任务 gulp.task("default", ["hasagi"]);

gulp-uglify其他参数

var gulp = require('gulp'), uglify= require('gulp-uglify'); gulp.task('jsmin', function () { gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js']) .pipe(uglify({ mangle: true,//类型：Boolean 默认：true 是否修改变量名 compress: true,//类型：Boolean 默认：true 是否完全压缩 preserveComments: 'all' //保留所有注释 })) .pipe(gulp.dest('dist/js')); });

3. gulp-minify-css 现在推荐gulp-clean-css 压缩css文件

下载： npm  install gulp-minify-css

使用： 先引入再使用

// 引入gulp var gulp = require("gulp"); // 引入插件 var cssMin = require("gulp-minify-css"); // 定义任务 gulp.task("yasuocss", function() { // 定位资源 gulp.src("./origin/a.css") .pipe(cssMin()) .pipe(gulp.dest("./publish/")) }) // 定义默认任务 gulp.task("default", ["yasuocss"]);

4. gulp-minify-html 现在推荐gulp-htmlmin 

压缩html文件

下载： npm  install gulp-minify-html

使用： 先引入再使用

// 引入gulp var gulp = require("gulp"); // 引入gulp-minify-html var miniHTML = require("gulp-minify-html"); // 引入gulp-htmlmin var htmlmin = require("gulp-htmlmin"); // 定义任务 gulp.task("yasuohtml", function() { gulp.src("./origin/index.html") // .pipe(miniHTML()) .pipe(htmlmin({collapseWhitespace: true})) // .pipe(gulp.dest("./publish/minify/")) .pipe(gulp.dest("./publish/min/")) }) // 定义默认任务 gulp.task("default", ["yasuohtml"]);

5. gulp-imagemin 压缩图片文件

下载： npm  install gulp-imagemin

使用： 先引入再使用

压缩时，png图片收益最大，jpeg图片收益较小， gif图片收益最小

// 引入gulp var gulp = require("gulp"); // 引入图片压缩插件 var imgmin = require("gulp-imagemin"); // 定义任务 gulp.task("yasuotupian", function() { gulp.src("./origin/*.*") .pipe(imgmin([ imgmin.gifsicle({interlaced: true}), imgmin.jpegtran({progressive: true}), imgmin.optipng({optimizationLevel: 5}), imgmin.svgo({ plugins: [ {removeViewBox: true}, {cleanupIDs: false} ] }) ])) .pipe(gulp.dest("./publish/")) }) // 定义默认任务 gulp.task("default", ["yasuotupian"]);

6. gulp-jslint  JS语法检测

下载： npm  install gulp-jslint

使用： 先引入再使用

// 引入gulp var gulp = require("gulp"); // 引入jslint var jsLint = require("gulp-jslint"); // 定义任务 gulp.task("check", function() { gulp.src("./origin/a.js") .pipe(jsLint()) }) // 定义默认任务 gulp.task("default", ["check"]);

7. gulp-concat 打包文件

下载： npm  install gulp-concat

使用： 先引入再使用

// 引入gulp var gulp = require("gulp"); // 引入压缩插件 var uglify = require("gulp-uglify"); // 引入打包插件 var concat = require("gulp-concat"); // 定义任务 gulp.task("hebing", function() { gulp.src("./origin/*.js") .pipe(concat("abc.js")) .pipe(uglify()) .pipe(gulp.dest("./publish")) }) // 定义默认任务 gulp.task("default", ["hebing"]);