随笔分类 - 前端工程化
gulp和webpack
摘要：匹配符 *、**、！、{} gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js'])
阅读全文
摘要：虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。 虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。 如果还不熟悉 gulp 的插件，可以阅读上一
阅读全文
摘要：安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是： "gulp": "^3.9.1" "gulp.spritesmith": "^6.5.1" gulpfile.js的配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1
阅读全文
摘要：功能描述生成sourcemap文件（什么是sourcemap？请参考，简单讲就是文件压缩后不利于查看与调试，但是有了sourcemap，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码） 插件安装$ cnpm install gulp-sourcemaps --save-dev1使用方法例
阅读全文
摘要：功能描述 gulp默认使用最大并发数执行任务，也就是说所有的任务几乎都是同时执行，而不会等待其它任务。但很多时候，任务是需要有先后次序的，比如要先清理目标目录，然后再执行打包。 run-sequence 的作用就是控制多个任务进行顺序执行或者并行执行 gulp-run-sequence 也是实现相同
阅读全文
摘要：1、文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’); 接下来，只要concat(‘xxx.js’)就算合并了。注意此时只是在内存中生成 前面我们学过管道的概念，因此代码整合非常简
阅读全文
摘要：流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm install webpack -g Step3: 使用Git Bash here 或者 cmd
阅读全文
摘要：什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sas
阅读全文
摘要：写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对we
阅读全文
摘要：gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
阅读全文
