前端自动化构建工具gulp

快速入门

全局安装gulp

npm install gulp --global

作为项目的开发依赖安装

npm install --save-dev gulp

在项目根目录创建gulpfile.js文件

运行gulp

gulp

默认的名为default的任务(task)将会被执行。

想要单独执行特定的任务(task),请输入gulp

gulp特点

易于使用

通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。

构建快速

利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习

通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

安装gulp

创建本地包管理环境

使用npm init命令在本地生成一个package.json文件,package.json是用来记录当你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules文件夹。只需要执行npm install 命令,即会自动安装package.json下devDependencies中指定的包。

只要使用npm命令安装即可。

因为gulp需要作为命令行的方式运行,因此需要安装在系统级别的目录中

npm install gulp -g

因为本地需要使用require的方式gulp。因此也需要在本地安装一份。

npm install gulp --save-dev

以上的--save-dev是将安装的包添加到package.json下的devDependencies依赖中。以后通过npm install 即可自动安装。

devDependencies是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装的时候使用 npm install xxx --save 就会记录到package.json下的dependencies中,dependencies是专门用来记录生产环境下的依赖的包。

创建gulp任务

要使用gulp来流程化我们的开发工作,首先需要在项目根目录下创建一个gulpfile.js文件,然后再gulpfile.js中填入以下代码:

通过require语句引用已经安装的第三方依赖包。require只能引用当前项目的,不能引用全局的。

gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字,第二个参数是函数,就是执行这个命令的时候要做的事情。

进入项目所在路径,使用gulp greet执行。

创建处理css文件的任务

gulp只是一个框架。如果实现一个复杂功能,例如css压缩,则需要安装gulp-cssnano插件。使用npm命令安装。

npm install gulp-cssnano --save-dev

然后再gulpfile.js中写入以下代码:

gulp.task创建一个css处理任务

gulp.src找到当前css目录下所有以.css结尾的css文件

pip管道方法。将上一个方法的返回结果传递给另外一个处理器。比如cssnano

gulp.dest将处理完后的文件,放到指定的文件夹下。与源文件不同的目录。

修改文件名

压缩完css文件后,添加一个.min.css的后缀,即表示是压缩后的文件。

需要使用gulp-rename来修改。本地需要如下安装:

npm install gulp-rename --save-dev

上面使用rename方法,并且传递一个对象参数,指定修改后的名字。

gulp添加文件前缀

安装gulp-autoprefixer,用于添加css文件的前缀

自此package.json文件如下

帮助

url链接:

https://www.npmjs.com/package/packagename

例如:

https://www.npmjs.com/package/gulp-autoprefixer

gulp插件

https://gulpjs.com/plugins/

谢谢!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180814G1SD4N00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券