前端构建之--gulp
|
gulp相关插件： 1、del 删除文件，用于清空文件 2、 用于自动刷新浏览器 3、 用于压缩html 4、 压缩css 给css属性自动增加浏览器前缀 5、 压缩js 6、 替换路径 7、 将小背景图转换为base64的形式，可以自己设置最大多少尺寸转为base64 8、 压缩图片大小 9、 检查Js语法错误 10、gulp-sass 编译sass 编译less 11、 为angular生成常数constant 12、 修改文件名称。比如有时需要把app.js改成app.min.js 13、gulp-util gulp-util里有很多方便的函数，最常用的就是log了。 14、 默认情况下，每次运行时候所有的文件都会传递并通过整个管道。通过使用可以只让更改过的文件传递过管道。这可以大大加快连续多次的运行。 15、 作用是一旦pipe中的某一个steam报错了，保证下面的stream还会继续执行。因为pipe默认的onerror函数会把剩下的stream给unpipe掉，这个插件阻止了这种行为。使用场景，例如，代码每次build之前都要跑一遍jshint和jscs来确保所有代码都符合规范，但一旦某些代码不符合规范，整个build流程都会停止，这个时候就需要gulp-plumber出场了。这个插件可以阻止gulp插件发生错误导致进程退出并输出错误日志 16、 把stream里的文件根据一定的规则进行筛选过滤。 17、 条件性的添加stream,如.pipe($.if(flag,action1()))，则只会在flag变量为true时才会将action1()添加到stream中去。其实不用这个插件也是可以达到类似的效果，利用gulp-util里的一个函数noop()，也就是no operation,这个函数其实返回一个什么都不干的空stream。利用这个函数可以这样写: .pipe(flag?action1():$.util.noop())，与上面的例子效果一样。 自动插入静态文件到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 lazyload: true 用到这个插件的时候再去require，默认为true， : 修改文件名称。比如有时需要把app.js改成app.min.js。{'gulp-task-listing': 'list'}，如果有些插件名字太长，可以使用该参数重命名。 把静态文件名改成hash形式 配合gulp-rev使用，拿到生成的manifest.json后替换对应的文件名称。 对html页面中的js，css引用进行合并，压缩等操作很简单。 生成sourcemaps信息文件,因为文件压缩后不利于查看与调试，但是有了sourcemap，出错的时候，出错工具将直接显示原始代码，而不是转换后的代码 合并文件 es6转es5 编译CoffeeScript 分环境配置 单元测试 : 严格的说，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文件Automatically sort AngularJS app files depending on module definitions and usage 根据路径名排序Sort stream by path name using a natural sort 压缩js会破坏AngularJs文件所需要的依赖注入，以至于无法工作，因此压缩前需要将 通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖，返回一个文件数组。 ：生成雪碧图 : 把HTML编译为Markdown : 可以把Markdown转换成HTML : 把Markdown编译为PDF （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |