简介:
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,提高了我们写代码的效率。它的功能:1,压缩css,js 2,压缩图 3,编译sass/less 4,编译CoffeeScript, 5,markdown转换为html 等等
下面简单介绍一下,使用gulp压缩css,js
1,创建gulp文件夹,创建两个名为app,build的子文件夹(app里存放的是压缩之前的文件,build里存放的是压缩之后的文件)。
2,全局安装gulp: sudo cnpm install gulp -g --save (--save是为了package.json文件中保存gulp安装时的信息)
3,局部安装gulp cd +gulp文件夹的路径,进去gulp文件夹,执行 cnpm install gulp --save (我也不知道为什么全局安装之后,还要局部安装,可能是因为版本支持的问题吧)
4,安装压缩js的模块--uglp-uglify: sudo cnpm install gulp-uglify --save(建议全局和局部都安装)
5,安装压缩css的模块--uglp-clean-css: sudo cnpm install gulp-clean-css --save(同上)
6,在gulp文件夹下,创建名为gulpfile.js的配置文件
包括引入模块,创建gulp任务(gulp.src(path)---选择文件,传入参数是文件路径 gulp-dest(path)--输出文件 gulp.pipe()--管道,可以暂时将pipe理解为将操作加入执行队列)
7,如果没有自动监控,在把需要的文件拖入app文件之后,还需要在终端执行 gulp script / gulp css 命令。如果有了自动监控,直接把js文件拖入app文件夹,build文件夹就可以自动生成压缩好的js文件。(直接拖入css文件,(第一次)不能够直接生成,需要把css文件改动一下,才能自动生成,之后所有的改动,都能直接生成压缩文件)
网友评论