前端构建工具是什么

感谢原知乎答案，前端构建工具是什么？ - Jasin Yip的回答 - 知乎

前端构建工具通常可以在前面加【自动化】三个字，就是用来让我们不再做机械重复的事情，解放我们的双手的。

举个栗子：

比如想用 CoffeeScript/ES6 代替Javascript，但是浏览器对这些语言是不支持或者支持得不完整的，需要将其编译成Javascript(ES5)，让它可以在浏览器里运行起来，要如何做？

a.coffee

console.log 'Hello World'

执行编译

coffee -c a.coffee

得到a.js

(function(){console.log('Hello World');
}).call(this);

执行压缩丑化命令

uglify -s a.js -o a.min.js

得到a.min.js

(function(){console.log("Hello World")}).call(this);

如果我们需要修改代码，在Hello World后面加一个“！”，那以上两条指令就要再重复执行一遍。

同样的，我们会用Less去写CSS，用Jade去写HTML，会用Browserify去模块化、为非覆盖部署的资源加MD5戳等。所有这些都需要手动来做。

自动化构建工具可以为我们完成这套重复而机械的工作。

以gulp为例，编写glupfile.js：

gulp   = require('gulp')
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
rename = require('gulp-rename')file = './src/js/a.coffee'gulp.task('coffee', function(){gulp.src(file).pipe(uglify())  // 压缩丑化.pipe(rename({extname: ".min.js"}))              // 重命名.pipe(gulp.dest('./build/js'))
})gulp.task('watch', function(){gulp.watch(file, ['coffee'])
})gulp.task('default', ['coffee'])

这样，我只要执行一下 gulp watch，它就可以自动监视 a.coffee 的变化，每次修改 a.coffee 并保存后，它就会自动执行编译->压缩丑化->重命名这一系列动作了。

自动化构建工具是前端工程化必不可少的。

前端构建工具是什么?相关推荐

55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
npm run buil构建后页面白屏_从Npm Script到Webpack，6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
前端构建工具gulpjs的使用介绍及技巧（转）
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
时下最流行前端构建工具Webpack 入门总结
作者:wenjuanrao,腾讯 PCG 前端开发工程师最近梳理了下以前 webpack 的相关开发经验,整理和总结了一份入门笔记,欢迎大家围观和批评指正. 随着 web 应用越来越复杂和庞大,前端 ...
[转]前端构建工具gulpjs的使用介绍及技巧
本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
前端构建工具与应用程序测试
1.前端构建工具什么是前端构建? 什么是构建工具? 自动构建工具 Npm Scripts(推荐) Npm Scripts(NPM脚本)是一个任务执行者.NPM是安装Node时附带的一个包管理器,Np ...
前端构建工具gulpjs的使用介绍及技巧
转载自:无双的博客园原文地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂 ...
前端构建工具_构建工具
前端构建工具深度JavaScript (Deep JavaScript) Choosing a development tool based on its popularity isn't a ba ...

前端构建工具是什么?

前端构建工具是什么

前端构建工具是什么?相关推荐

最新文章

热门文章