gulp安装指定版本_前端工程化之gulp使用

gulp是什么?

简单的来说就是一个前端工程的流水线，借助它，你可以把可以把一系列的工作任务制作成一个流水线（工作流），上一个操作完成后交给下一个操作处理，直到得到你想要的成果。

gulp流水线从src()开始，直到dest()结束，中间的操作通过pipe()传输，经过操作1完成后的数据流通过pipe()传输给操作2处理，以此类推一直到操作n，最后经过dest()输出结果

gulp 常用API

• src() 读取指定文件，然后转换成数据流输出
• pipe() 传输操作后的数据流
• dest() 把数据流转换成文件保存
• task() 定义一个任务，也就是一个操作
• series() 把多个任务组合起来，按顺序执行
• parallel() 把多个任务组合起来，同时执行
• watch() 监听文件变动，然后执行操作

语法：

globs指的是由 / 和* 、** 组成的匹配文件路径的字符串

src(globs, [options]) //src('input/*.js')
pipe()//.pipe(babel())
dest(directory, [options]) //.pipe(dest('output/'))
task([taskName], taskFunction) 
series(...tasks) //series(task1, task2)
parallel(...tasks) //parallel(task1,taks2)
watch(globs, [options], [task])

gulp安装使用

1. 创建空文件夹mkdir gulp-project ，进入文件夹内cd gulp-project
2. 使用npm初始化项目npm init -y
3. 在本地目录下安装gulp npm install --save-dev gulp
4. 查看gulp版本 ./node_modules/.bin/gulp --version
5. 创建gulpfile.js文件，gulp的所有操作都写在gulpfile里面

上图信息说明gulp已成功安装到到本地文件夹下面

使用gulp实现下面的功能：

1. 使用less工具把less编译成css
2. 使用cssnano压缩css文件
3. 使用postcss和autoprefixer给css加前缀，兼容目标浏览器
4. 使用concat把所有css文件合并成一个css

在gulp-project项目里面添加几个新文件：dist/index.html 、src/less/common.less 、src/less/main.less 、src/less/variable.less

在gulpfile.js面添加

使用npn install --save-dev packageName安装require所需要的npm包

autoprefixer所需的浏览器信息写在package.json里面

最后得到的结果：

得到的merge.css文件：

网页效果：

为了方便，可以使用npm run watch实现自动化编译，当你修改less文件保存后，gulp会自动把整个流程走一遍，得到编译后的文件

项目链接：https://github.com/JenvyXU/gulp-project

总结

gulp就像一个外包团队，我们可以把除了写代码以外的工作外包给gulp处理，我们只需要写代码就行了，gulp会帮我们进行后续处理，最后得到我们想要的代码。