![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端自动化构建
奋斗的小绿萝
莫问前程,只管修行
展开
-
Webpack Error——TypeError: Cannot read property 'properties' of undefined原因分析及解决方法
一、背景使用webpack构建项目时报错: describe: optionsSchema.definitions.output.properties.path.description, ...原创 2018-12-05 15:29:57 · 83392 阅读 · 7 评论 -
bower报错:EINVALID Name must be lowercase, can contain digits, dots, dashes, "@" or spaces
报错PS D:\01_Study\Nodejs\Nodejs+MongoDB建站攻略> bower install bootstrapbower EINVALID Name must be lowercase, can contain digits, dots, dashes, "@" or spaces原因安装目录文件夹命名中包...原创 2018-08-15 11:25:30 · 1621 阅读 · 0 评论 -
webpack 4.0 快速构建项目
说起前端的自动化构建,除了grunt,gulp,目前最火的无疑就是webpack。webpack最大的优点在于它的模块化。在这里,将记录关于webpack4.0自动化构建项目的学习之路。官网指南:https://www.webpackjs.com/guides/一、安装webpack二、下载依赖三、初始化项目四、webpack.config.js配置项目五、...原创 2018-08-07 13:44:15 · 382 阅读 · 0 评论 -
webpack 不同source map的选择
对比如下: 详见地址:https://www.webpackjs.com/configuration/devtool/原创 2018-08-07 12:39:57 · 1158 阅读 · 0 评论 -
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 处理方法
报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 原因:extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。 解决办法:npm install –save-dev extrac...原创 2018-08-06 16:36:50 · 1472 阅读 · 2 评论 -
详解AMD、CommonJS和UMD模块化规范
开发的时候,我们经常会把某些功能封装成可复用的模块。模块封装了功能,并且对外暴露一个API。随着Node.js的诞生和发展,JavaScript可以在服务端运行,同时客户端应用也越来越流行,JavaScript界产生了对优秀和健壮模块系统的需求。在JavaScript中定义模块的规范也随之产生。这里,将详细介绍最常见的两个定义模块的方法AMD和CommonJS,以及它们的结合UMD....原创 2018-07-26 23:06:57 · 7359 阅读 · 0 评论 -
Web前端自动化构建(四)—— Bower 依赖管理(Bower集成Gulp的两种方式)
全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》 作者:Stefan Banumgartner【奥】 译者:谈博文Bower可以管理项目的依赖,因而我们可以不再使用本地下载好的vendor,因为这个文件夹可能存在老版本的组件。下面,我们将一个存在于‘./scripts/vendor’目录下的jquery,通过bower安装,并使用gulp把...原创 2018-07-19 18:08:08 · 510 阅读 · 0 评论 -
Web前端自动化构建(四)—— Bower 依赖管理(入门)
全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》 作者:Stefan Banumgartner【奥】 译者:谈博文典型的依赖树主要有三种:扁平依赖树、嵌套依赖树和混合依赖树。 Bower是一个专门为前端开发设计的依赖关系工具,使用的是扁平依赖树。 安装:npm install -g bower在一个空项目下,执行命令:bow...原创 2018-07-19 17:27:21 · 307 阅读 · 0 评论 -
Web前端自动化构建(三)——用Gulp配置本地开发环境
全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》 作者:Stefan Banumgartner【奥】 译者:谈博文Gulp提供了自动化的能力,可配置成一个完全自动化的、完整的开发环境。通过Gulp API,gulp.series、gulp.parallel,决定task执行的顺序通过Gulp API,gulp.watch 创建监控过程,...原创 2018-07-18 18:36:43 · 1508 阅读 · 0 评论 -
Web前端自动化构建(二)——Gulp入门
全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》 作者:Stefan Banumgartner【奥】 译者:谈博文Gulp是用JavaScript编写、运行在Node.js上的构建工具。配置GulpCreated with Raphaël 2.1.2安装Gulp创建Gulpfile使用Gulp插件处理task1 安装 Gulp...原创 2018-07-18 16:09:01 · 478 阅读 · 0 评论 -
Web前端自动化构建(一)——现代前端工具流的工具链
写在前面的话: 最近开始学习Web前端自动化构建,为加深学习效果,整理笔记,作为博客发出。 全名:《Web前端自动化构建 Gulp、Bower和Yeoman开发指南》 作者:Stefan Banumgartner【奥】 译者:谈博文第一章 现代前端工作流的工具链脚手架工具 Yeoman: 创建应用依赖管理工具 Bower: 下载依赖 构建...原创 2018-07-18 15:09:29 · 2703 阅读 · 0 评论 -
gulp插件:gulp-cssnano,gulp-minify-css 和gulp-clean-css
近日在学习《Web前端自动化构建》,关于gulp的css压缩插件,书中先后提到了两个,分别是gulp-cssnano和gulp-minify-css,而执行npm install gulp-minify-css –save-dev时,控制台提示如下: npm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-clean-css gu...原创 2018-07-18 11:24:13 · 3649 阅读 · 0 评论 -
webpack 4 打包后bundle.js过大,处理过程
最近做公司项目,用webpack 打包发现输出的bundle.js文件体积超大,9M多。查阅相关博客,最后处理得到的bundle.js压缩到202k。由于目前用的webpack是4.10.2, 在处理过程中,也遇到了关于webpack版本的一些坑。根据webpack version 4+, 整理优化思路如下:1. 去除devtool(罪魁祸首)bundle.js达到9M,明显是在webp...原创 2018-07-11 14:28:05 · 20084 阅读 · 3 评论 -
Gulp Error: Cannot find module 'jshint/src/cli';
在学习《web前端自动化构建》一书,根据第二章《Gulp入门》中,为使用JSHint进行代码风格检查,安装gulp-jshint后,写了如下示例代码:const jshint = require('gulp-jshint');gulp.task('test', () => { return gulp.src('./app/**/*.js') .pipe(jsh...原创 2018-07-17 13:49:30 · 2616 阅读 · 0 评论 -
gulp: Did you forget to signal async completion?处理
gulp: Did you forget to signal async completion?处理新思路背景学习gulp的前端自动化构建,按照示例代码,跑了一个简单的task,控制台打出如下提示: The following tasks did not complete: testGulp Did you forget to signal async completi...原创 2018-07-17 13:21:24 · 26572 阅读 · 7 评论