gulp的使用

Posted 2021-04-08 XYZ制作

gulp的简单使用

==============

安装：在package.json文件下添加gulp模块

"devDependencies": {

  "gulp":"*"     // *代表自动匹配版本

 }

  //devDependencies：开发阶段完成集成测试等功能模块依赖

命令提示符执行 npm install

注：插件也可采用此安装模式。

如何使用

        命令提示符执行gulp 任务名称；

 编译less：命令提示符执行gulp testLess；

 当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]

通过该例子你可以认识以下插件的使用

一、gulp-less

    使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less， 并保证less语法错误或出现异常时能正常工作并提示错误信息

二、gulp-htmlmin

    使用gulp-htmlmin压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等

三、gulp-uglify

    使用gulp-uglify压缩javascript文件，减小文件大小。

四、gulp-concat

    使用gulp-concat合并javascript文件，减少网络请求。

五、gulp-imagemin

    使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）。六、browser-sync

    使用browser-sync能让浏览器实时、快速响应您的文件更改 ( html、js、css、sass、less等）并自动刷新页面。

小练习

通过该例题尝试使用 gulp-concat 插件对js文件进行合并

* 插件及配置以及完成，直接添加.js文件并操作

* 你可以尝试`npm uninstall 插件名`来删除插件

长按扫描二维码