是很多优秀前端程序员开发过程中对代码进行构建的工具,我可是自动化项目的构建利器;不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用了我,你们不仅可以很愉快的编写代码,而且会大大的提高你们的工作效率。快来仔细了解我吧~
为什么使用Gulp?
Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多强大的插件。(这就是我优秀的特点!)
基本功能:
·HTML组件化。该 common 的拎出来;该 widget 的拎出来
· 图片压缩、合并
· JS/CSS/HTML 压缩、合并
· 编译sass/less
使用gulp的步骤:
首先当然是安装nodejs, 通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
命令行:
cd定位到目录,用法:cd + 路径;
dir列出文件列表;
cls清空命令提示符窗口内容。
全局安装gulp
命令提示符执行cnpm install gulp –g
查看是否正确安装:
命令提示符执行gulp -v,出现版本号即为正确安装
本地安装gulp:
cnpm install gulp --save-dev
我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能
新建package.json文件
命令提示符执行cnpm init
本地安装gulp插件
定位目录命令后提示符执行cnpm install --save-dev
以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev
新建gulpfile.js文件(重要)
说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件
运行gulp
命令提示符执行gulp 任务名称
1
必备插件
·gulp-htmlmin看到名字就能知道,这个插件是用来压缩 HTML。PS:注释啥的都可以去掉
·gulp-imagemin除了能压缩常见的图片格式,还能压缩 SVG
·gulp-clean-css压缩 CSS。
·gulp-uglify专业压缩 Javascript
·gulp-concat上面几个都是压缩,这插件是管合并的...恭喜,“减少网络请求”的成就达成:)
·gulp-autoprefixer给 CSS 增加前缀。解决某些CSS属性不是标准属性,有各种浏览器前缀的情况,灰常有用
·gulp-rename修改文件名称。比如有时我们需要把app.js改成app.min.js,瞬间高级了
·gulp-util最基础的工具。
–save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;
譬如,想借助gulp压缩美化下js代码,写如下代码于gulpfile.js即可:
使用Gulp我们只需要放一个路径,通过管道(pipe)方式使用插件,最后生成文件
又如,用gulp-concat插件合并两个js文件:
gulp 常用的API
一、gulp.task
gulp 是基于task的方式来运行
gulp.task(name , fn)
注册一个task, name 是task的名字, fn是task要执行的函数
二、gulp.src
gulp.src(globs)
与globs 匹配的文件,可以是string或者一个数组
三、 gulp.dest
gulp.dest(path) 就是最终文件要输出的路径
四、gulp.watch
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
就是监视文件的变化,然后运行指定的Tasks或者函数,这个相比Grunt需要使用插件,gulp本身就支持的很好。
领取专属 10元无门槛券
私享最新 技术干货