关于前端自动化构建工具

一、简介

　　　之前了解了自动化构建相关工具，然后今天有时间就把学习过程碰到的坑写下来。首先是前端自动化构建三大工具gulp\grunt\webpack。其实说是三大工具，但也只是个人主观想法。因为自己常见的并有所了解的就这三个。至于其他的，暂不在讨论范围。

二、gulp、grunt、webpack对比

　　1、Grunt和Gulp属于任务流工具Tast Runner , 而 webpack属于模块打包工具 Bundler。

　　2、Grunt的出现早于Gulp，Gulp是后起之秀。他们的本质都是通过 JavaScript 语法实现了shell script 命令的一些功能。比如利用jshint插件实现 JavaScript 代码格式检查这一个功能。早期需要手动在命令行中输入 jshint test.js，而 Grunt 则通过文件 Gruntfile.js 进行配置

　　3、 Gulp吸取了Grunt的优点，拥有更简便的写法，通过流（Stream）的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。通过配置gulpfile.js文件来实现。

　　4、webpack是后起之秀，它支持了AMD 和 CommonJS 类型，通过loader 机制也可以使用ES6模块格式。还有强大的 code splitting。webpack 是个十分强大的工具，它正在想一个全能型的构建工具发展。

　　5、gulp和grunt是流管理工具，通过一个个task配置执行用户需要的功能，如格式检验，代码压缩等，值得一提的是，经过这两者处理的代码只是局部变量名被替换简化，整体并没有发生改变，还是你的代码。

　　而webpack则进行了更彻底的打包处理，更加偏向对模块语法规则进行转换。主要任务是突破浏览器的鸿沟，将原本浏览器不能识别的规范和各种各样的静态文件进行分析，压缩，合并，打包，最后生成浏览器支持的代码，因此，webapck打包过后的代码已经

　　　不是你写的代码了，或许你再去看，已经看不懂啦

作者：果汁凉茶丶
链接：https://www.jianshu.com/p/fe96491ccf56
來源：简书

三、工具选择与自我实践

　　1、查阅相关文档之后，选择gulp作为突破口。首先，gulp配置相对其他两个而言稍显简单。

　　2、插件数量虽然不多，但是在不断丰富并满足基本需求。

四、安装

　　1、首先下载安装node.js，安装步骤不再赘述，百度即可。

　　2、全局安装gulp之后最好再局部安装（即项目所在目录）;安装目录百度即可。

　　3、在根目录下新建gulpflie.js

　　4、引入插件，注册插件，使用插件

五、一些零散的笔记

var gulp = require("gulp");
var browserSync = require("browser-sync");
var sass = require("gulp-sass");
gulp.task("browserSync",function(){
    browserSync.init({
        server:"app"
    })
    //
})
gulp.task("sass",function(){
    return gulp.src("app/scss/style.scss")
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
})
gulp.task("watch",function(){
    gulp.watch("app/**/*.scss",["browserSync","sass"])
    gulp.watch("app/**/*.scss").on("change",browserSync.reload);
})

以上是利用sass插件和browser-sync插件制作的编译sass并异步刷新的功能

六、需要注意的地方

　　1、nodejs会自动安装gulp最新版本，但是4.0在语法与3.9一下版本有些不同。安装自定义版本gulp命令：npm install [email protected]

　　2、使用插件之前先使用命令安装插件，然后在gulpfile.js引入。之后再定义任务使用。

七、其他参考

　　https://www.cnblogs.com/Tom-yi/p/8036730.html

八、使用browser-sync做pc移动端调试的时候，按照步骤走到打开localhost:3001的设置页面时，不知道为什么没有找到相对应的开关

　　https://segmentfault.com/q/1010000013649934

　　https://blog.csdn.net/u013063153/article/details/52787421

关于前端自动化构建工具

猜你喜欢