前端工具-gulp 教程

说到前端构建工具,首先想到的是gulp和webpack。关于gulp是否已经被淘汰,我在业务比较简单的项目里都用gulp,比如官网的制作,简单的文件编译(多个微信小程序账号,一套代码)。引用2017年寸志在前端真的需要打包工具吗?这里说的,“jQuery+Bootstrap+Gulp比较基础的前端技术栈,适合做一些后端渲染的网站开发,Webpack+Vue+Vue 周边适合开发网页应用,管理系统,体验不错的网站。”

一、安装

不管学习啥技术,先看下官方文档总没错,按官方文档的操作一波走起。
1.gulp安装
1.1cd 要存放的目录
npm init
1.2全局方式安装gulp
npm install -g gulp
gulp -v
1.3全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次
npm install –save-dev gulp
2.编写gulpfile.js文件
2.1简单写个任务及引用
gulp.task(‘default’, done => {
console.log(‘Hello World!’);
done();
});
2.2命令行运行gulp
gulp

二、需求

项目简单的跑起来了,下面就要开始搞实现需求了。
(一)多个微信小程序账号,一套代码
多个微信小程序账号,一套代码,这个需求完全是为了方便代码的同步。功能大致一样,写个配置文件config.json,执行不同的命令,gulp构建出不同的config.js和project.config.json。然后再用命令行打开微信开发者工具,进行调试。
这里主要涉及2个知识点,gulp从命令行传递参数,生成新的js和json文件,命令行打开微信开发者工具。

gulp从命令行传递参数,生成新的js和json文件。很高兴官网的秘籍竟然就有这方面的分类,集合着使用gulp进行简单的分环境配置这篇文章,算是完美解决。

命令行打开微信开发者工具,官网的介绍写了,但是看完还是没走出第一步。找到微信开发者工具的安装目录,看到里面有命令行工具,打开看它执行的代码才找到了真相。在命令行工具(zsh)里执行/Applications/wechatwebdevtools.app/Contents/MacOS/cli -o 你的小程序代码目录(Mac),就打开了。找到很简单,门外汉光着急,没卵用。

(二)官网简单页面制作

 

(三)gulp使用tips

1.串行方式运行任务,也就是我们很多时候需要执行完一个task之后,再执行另一个。官方真的很给力任务依赖,今天莫名没跑起来项目,看下文件目录,原来是部分执行的顺序有问题。

未完待续…