zoukankan      html  css  js  c++  java
  • 前端构建之--gulp

    gulp相关插件:

    1、del / gulp-clean 删除文件,用于清空文件

    2、browser-sync 用于自动刷新浏览器

    3、gulp-htmlmin 用于压缩html

    4、gulp-clean-css / gulp-cssnano 压缩css

    gulp-autoprefixer 给css属性自动增加浏览器前缀

    5、gulp-uglify 压缩js

    6、gulp-replace 替换路径

    7、gulp-base64 将小背景图转换为base64的形式,可以自己设置最大多少尺寸转为base64

    8、gulp-imagemin 压缩图片大小

    9、gulp-eslint/gulp-jshint  检查Js语法错误

    10、gulp-sass 编译sass

    gulp-less 编译less

    11、gulp-ng-constant 为angular生成常数constant

    12、gulp-rename 修改文件名称。比如有时需要把app.js改成app.min.js

    13、gulp-util gulp-util里有很多方便的函数,最常用的就是log了。

    14、gulp-changed 默认情况下,每次运行时候所有的文件都会传递并通过整个管道。通过使用 gulp-changed 可以只让更改过的文件传递过管道。这可以大大加快连续多次的运行。

    15、gulp-plumber 作用是一旦pipe中的某一个steam报错了,保证下面的stream还会继续执行。因为pipe默认的onerror函数会把剩下的stream给unpipe掉,这个插件阻止了这种行为。使用场景,例如,代码每次build之前都要跑一遍jshint和jscs来确保所有代码都符合规范,但一旦某些代码不符合规范,整个build流程都会停止,这个时候就需要gulp-plumber出场了。这个插件可以阻止gulp插件发生错误导致进程退出并输出错误日志

    16、gulp-filter 把stream里的文件根据一定的规则进行筛选过滤。

    17、gulp-if 条件性的添加stream, 如.pipe($.if(flag, action1())),则只会在flag变量为true时才会将action1()添加到stream中去。其实不用这个插件也是可以达到类似的效果,利用gulp-util里的一个函数noop(),也就是no operation,这个函数其实返回一个什么都不干的空stream。利用这个函数可以这样写: .pipe(flag?action1():$.util.noop()),与上面的例子效果一样。

    gulp-inject 自动插入静态文件到html

    gulp-flatten 去掉文件夹层级,例如gulp.src('**/*.js')匹配了很多文件,包括a/b/c.js, d/e.js, f/g/h/i/j/k.js, l.js这些文件的层级都不一样,一旦将这个文件pipe给$.flatten()则所有的文件夹层级都会去掉,最终文件将是c.js,e.js,k.js,l.js

    gulp-load-plugins 这个插件的功能就是帮助require我们在package.json中声明的依赖。只要let $=require('gulp-load-plugins')(),则package.json中声明的gulp-或gulp.开头的插件就会自动被放在变量$下面。例如$.util等于require('gulp-util'),而有两个连字符的插件则会自动命名为驼峰式格式,如$.taskListing则等于require('gulp-task-listing')。有了这个插件就不需要一个一个的require了。该插件的一些常用参数配置如下:

    lazyload: true 用到这个插件的时候再去require,默认为true,

    gulp-rename: 修改文件名称。比如有时需要把app.js改成app.min.js。{'gulp-task-listing': 'list'},如果有些插件名字太长,可以使用该参数重命名。

    scope: ['dependencies'],本插件默认会扫描package.json里的所有dependence,可以使用该参数进行限制。

    gulp-rev: 把静态文件名改成hash形式

    gulp-rev-replace: 配合gulp-rev使用,拿到生成的manifest.json后替换对应的文件名称。

    gulp-useref: 对html页面中的js,css引用进行合并,压缩等操作很简单。

    gulp-sourcemaps 生成sourcemaps信息文件,因为文件压缩后不利于查看与调试,但是有了sourcemap,出错的时候,出错工具将直接显示原始代码,而不是转换后的代码

    gulp-concat:合并文件

    gulp-babel es6转es5

    gulp-coffee: 编译CoffeeScript

    gulp-env 分环境配置

    gulp-mocha 单元测试

    gulp-header 用来在压缩后的js,css文件中添加头部注释,可以包含任意想要的信息,通常是作者、描述、版本号、license等

    run-sequence gulp里的任务都是异步并发执行的,有时需要一连串的task按顺序执行,这时就需要run-sequence登场了。

    它的调用很简单:runSequence('task1', 'task2', ['task3', 'task4'], 'task5'), 这里的task都是gulp定义好的task名称,task1完成后才会执行task2,以此类推。注意到task3和task4被放到方括号中,这表明task3和task4可以并发执行,但两个都执行完后才会执行task5。每一个task都会返回一个stream,即return gulp.src().pipe().pipe(),要么支持回调函数,即gulp.task('task1', function(done) {action1(done);}),满足了这两点才能保证正常的执行顺序,因为这是gulp对异步task的基本要求。

    yargs: 严格的说,yargs不是专门用于gulp的,它是Node中处理命令行参数的通用解决方案,只要一句代码var args = require('yargs').argv;

    就可以让命令行的参数都放在变量args上,非常方便。它处理的参数类型也是多种多样的:

    单字符的简单传参,如传入-m=5 或 -m 5, 则可以得到args.m=5;

    多字符传参(必须使用双连字符),如传入--test=5 或 --test 5, 则可以得到args.test =5。

    不带值的参数,如传入--mock, 则会被认为是布尔类型的参数,可得到args.mock=true。

    除此之外,还支持很多其他类型的传参方式,具体参考文档https://www.npmjs.com/package/yargs

    gulp-angular-templatecache 将angularjs html模板压缩并缓存

    gulp-angular-filesort 根据模块的定义和引用顺序排序angularjs文件Automatically sort AngularJS app files depending on module definitions and usage

    gulp-natural-sort 根据路径名排序Sort stream by path name using a natural sort

    gulp-ng-annotate 压缩js会破坏AngularJs文件所需要的依赖注入,以至于无法工作,因此压缩前需要将angular.module("MyMod").controller("MyCtrl", function($scope, $timeout) { });手动修改为这种形式angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) { }]);ng-annotate就帮助我们完成这项工作

    main-bower-files 通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖,返回一个文件数组。

    event-strean

    http-proxy-middleware

    merge-stream 将多个stream合并成一个返回。一个gulp的task只能返回一个stream,但有这样的一种场景:有两类文件,它们的原始位置和处理后的位置都是不同的,但它们的处理流程相同。由于gulp.src和gulp.dest的参数不同,我们就需要写两个task来分别完成这个任务,一方面略显重复,另一方面逻辑上来讲这两个task本来就是处理相同的事情,这种情况就需要merge-stream了。

    sprity:生成雪碧图

    gulp-html2md: 把HTML编译为Markdown

    gulp-markdown: 可以把Markdown转换成HTML

    gulp-markdown-pdf: 把Markdown编译为PDF

     

     

     
  • 相关阅读:
    -Prefix.pch has been modified 的错误修复
    Xcode插件,模板安装
    php 内置函数JSON处理
    OC 创建单例
    UITabBarController 的配置
    execute、executeQuery和executeUpdate之间的区别
    iOS类方法实例方法 与 self
    iOS U7ea2 乱码 转换
    PHP 页面跳转的三种方式
    C#数组 动态添加元素
  • 原文地址:https://www.cnblogs.com/xuepei/p/9071381.html
Copyright © 2011-2022 走看看