26gulp的API及运用

最新推荐文章于 2019-06-03 14:00:00 发布

转载最新推荐文章于 2019-06-03 14:00:00 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10966104.html

本文深入探讨Gulp作为前端自动化工具的功能与应用，包括文件导入、导出、任务定义及监视机制，同时介绍常见Gulp插件如gulp-useref、gulp-angular-templatecache等，助力前端开发效率提升。

来源：https://www.cnblogs.com/2050/p/4198792.html
gulp，前端自动化工具的作用：
（1）打包，供生产环境使用。
（2）监听，供开发环境使用。
一、gulp的API

1、gulp.src(globs[, options])导入文件的路径
globs参数匹配文件路径(路径包括文件名，分为具体路径和通配符路径)。当有多个路径时，该参数为一个数组。
options为可选参数。通常情况下我们不需要用到。
* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
gulp.src(['js/*.js','css/*.css','*.html'])
使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式
gulp.src([*.js,'!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

2、gulp.dest(path[,options])导出文件的目录
path为写入文件的路径
options为一个可选的参数对象，通常我们不需要用到
gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，生成的文件名是由导入到它的文件流决定的。
gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。例如：
gulp.src('script/**/*.js') .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js

3、gulp.task(name[, deps], fn)用来定义任务
name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。
fn 为任务函数，我们把任务要执行的代码都写在里面。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务 // Do something});
gulp中执行多个任务，可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务，那我们就可以定义一个空的任务，然后把那三个任务当做这个空的任务的依赖就行了：
//只要执行default任务，就相当于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);
如果任务相互之间没有依赖，任务会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。
但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。

4、gulp.watch(globs[, opts], tasks)或gulp.watch(glob[, opts, cb])用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务
globs参数匹配文件路径(路径包括文件名，分为具体路径和通配符路径)。当有多个路径时，该参数为一个数组。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径
gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
    console.log(event.path); //变化的文件的路径
});

二、gulp的API的运用(导入文件=>管道=>处理文件=>管道=>导出)

三、html
```html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainCtrl" ng-cloak>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="../../static/common/editor.md/css/editormd.min.css">
</head>
<body ondragstart="return false;">
  <my-app></my-app>
</body>
</html>
```
四、main.js
1、每个Angular“应用程序”ng-app都有一个 injector ,负责创建并查找依赖，
2、当缓存中没有依赖key1时，记依赖对象为{key1:null,key2:value2,...},
3、inject是异步执行的，
4、继续向下执行，注入全局配置函数config和run
5、继续向下执行，当key1出现时，key1修改依赖对象为{key1:value1,key2:value2,...}，
6、所有文件加载完毕以后，执行全局配置函数config和run，
7、如果所有文件加载完毕，key1也没有出现，则会报错，不会执行全局配置函数。

angular
    .module('app', [
      'module-protocol',
      'module-study'
    ])
    .config(function ($stateProvider, $urlRouterProvider, menu) {
    })
    .run(function ($rootScope, account_m, app_init, account_data) {
    });

五、gulp插件介绍
1、gulp-useref：对html页面中的js，css引用进行简单的合并、压缩。
3、gulp-load-plugins：让当前文件自动加载package.json文件里的gulp插件。
3、gulp-angular-templatecache：将指定的HTML模板文件以JS字符串的形式注册在(Angular自带的)$templateCache服务中。
4、gulp-htmlmin：对html页面中的js，css引用进行（去除页面空格、注释，删除多余属性等）复杂的合并、压缩。

http://pinkyjie.com/2015/08/02/commonly-used-gulp-plugins-part-1/
http://pinkyjie.com/2015/08/12/commonly-used-gulp-plugins-part-2/#more
另、browser-sync:让浏览器实时响应文件更改、自动刷新页面。

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10966104.html