自动化构建工具 Gulp

Gulp 与 npm scripts
  • Gulp 与 npm scripts 都能够实现自动化构建
  • Gulp 语法简单
  • Gulp 语法就是 JavaScript 语法
  • npm scripts 语法接近 shell 脚本 • Gulp 生态完善,构建效率高
Gulp - 基本使用
  • 全局安装 gulp 客户端( npm install -g gulp- cli )
  • 初始化项目(npm init --yes)
  • 安装 gulp 包( npm install gulp -D )
  • 新建 gulpfile 文件 ( gulpfile.js )
  • 在 gulpfile.js 中,创建 gulp 任务
  • 执行 gulp 任务 ( gulp
Gulp - 组合任务

请添加图片描述

Gulp - 文件操作请添加图片描述

请添加图片描述

Gulp 是基于 流 的构建系统

请添加图片描述

请添加图片描述
请添加图片描述

Gulp 构建样式文件

请添加图片描述
请添加图片描述

Gulp 构建脚本文件

请添加图片描述

Gulp 构建脚本文件所需插件

请添加图片描述

Gulp 构建页面文件

请添加图片描述

Gulp 构建任务组合

请添加图片描述

Gulp 文件清除

请添加图片描述

Gulp 开发服务器

请添加图片描述

请添加图片描述
请添加图片描述

Gulp 使用Bootstrap

请添加图片描述

Gulp 开发服务器中监视文件变化

请添加图片描述

Gulp 在 Yeoman 中的应用-Webapp 生成器

请添加图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简介 XMake 是一个跨平台自动构建工具,支持在各种主流平台上构建项目,类似 cmake、automake、premake,但是更加的方便易用,工程描述语法更简洁直观,支持平台更多,并且集创建、配置、编译、打包、安装、卸载、运行于一体。 支持特性 支持windows、mac、linux、ios、android等平台,自动检测不同平台上的编译工具链(也可手动配置) 编译windows项目采用原生vs的工具链,不需要使用cygwin、mingw(当然这些也支持) 支持自定义平台编译配置,可以很方便的扩展第三方平台支持 采用lua脚本语法描述项目,描述规则简单高效,逻辑规则可灵活修改,并且不会生成相关平台的工程文件,是工程更加简单明了 支持创建模板工程、配置项目、编译项目、运行、打包、安装和卸载等常用功能(后续还会增加:自动生成文档、调试等模块) 支持编译c/c /objc成静态库、动态库、命令行可执行程序(后续还会增加:mac、ios、android的app的生成规则) 提供丰富的工程描述api,使用简单灵活,例如添加编译文件只需(还支持过滤排除): add_files("src/*.c", "src/asm/**.S", "src/*.m") 支持头文件、接口、链接库依赖、类型的自动检测,并可自动生成配置头文件config.h 支持自定义编译配置开关,例如如果在工程描述文件中增加了enable_xxx的开关,那么配置编译的时候就可以手动进行配置来启用它: xmake config --enable_xxx=true 提供一键打包功能,不管在哪个平台上进行打包,都只需要执行一条相同的命令,非常的方便 支持自定义编译工具和规则,例如想要增加对masm/yasm的编译规则,只需将自己写的masm.lua/yasm.lua规则文件,放到当前项目目录下即可。。 支持全局配置,一些常用的项目配置,例如工具链、规则描述等等,都可以进行全局配置,这样就不需要每次编译不同工程,都去配置一遍 除了可以自动检测依赖模块,也支持手动强制配置模块,还有各种编译flags。 简单例子 创建一个c console项目:xmake create -l c  -t 1 console  or xmake create --language=c  --template=1 console 工程描述文件:xmake.luaadd_target("console")     set_kind("binary")     add_files("src/*.c") 配置工程: 这个是可选的步骤,如果只想编译当前主机平台的项目,是可以不用配置的,默认编译release版本。   当然每次配置都会被缓存,不需要每次全部重新配置。xmake f -p iphoneos -m debug or xmake f --ldflags="-Lxxx -lxxx" or xmake f --plat=macosx --arch=x86_64 or xmake config --plat=iphoneos --mode=debug or xmake config --plat=iphonesimulator or xmake config --plat=android --arch=armv7-a --ndk=xxxxx or xmake config --cross=i386-mingw32- --toolchains=/xxx/bin or xmake config --cxflags="-Dxxx -Ixxx" or xmake config --help 编译工程:xmake or xmake -r or xmake --rebuild 运行目标:xmake r console or xmake run console 打包所有:xmake p or xmake p --archs="armv7, arm64" or xmake package or xmake package console or xmake package -o /tmp or xmake package --output=/tmp 安装目标:xmake i or xmake install or xmake install console or xmake install -o /tmp or xmake install --output=/tmp 详细使用方式和参数说明,请参考文档 或者运行:xmake -h or xmake --help or xmake config --help or xmake package --help ... 也可以参考使用xmake的实际项目:TBOX 后续工作 完善打包模块,支持对ios、mac、android的app进行一键打包和签名,生成.ipa、.apk、.app的应用程序文件 完善安装功能,支持对ios、android的app进行安装到设备 实现调试功能 实现自动生成doxygen文档功能 增加一些实用的工程描述api,例如:下载api,可以自动下载缺少的依赖库等等。。 解析automake、cmake的工程,并自动生成xmake的描述文件,实现无缝编译(如果这个实现成功的话,以后移植编译一些开源代码就更方便了) 标签:构建工具
### 回答1: Gulp是一种前端自动化工具,它可以帮助前端开发人员自动完成一些重复性工作,例如压缩CSS和JavaScript文件、自动刷新浏览器、合并文件等。 使用Gulp需要先安装Node.js和npm,然后使用npm安装Gulp。安装完成后,可以在项目的根目录下创建一个名为gulpfile.js的文件,该文件中定义了Gulp要执行的任务和任务的具体操作。 在gulpfile.js中,可以使用Gulp提供的API来定义任务。例如,可以使用gulp.task()方法定义一个任务,该方法接受两个参数:任务的名称和任务要执行的操作。可以使用gulp.src()方法指定要处理的文件,然后使用各种Gulp插件来执行各种操作,例如gulp-concat用于合并文件,gulp-uglify用于压缩JavaScript文件等。 最后,可以使用gulp.dest()方法将处理后的文件保存到指定目录。定义好任务后,可以在终端中使用gulp命令来执行任务,Gulp会自动执行任务并输出相关日志信息。 ### 回答2: Gulp是一个前端自动化工具,它通过编写简洁、易于理解的代码来帮助开发者自动化前端开发中的各种任务。 首先,Gulp使用简单且灵活。它使用流的概念,让开发者能够通过将任务连接在一起构建整个开发流程。开发者可以定义各种任务,如压缩文件、合并文件、编译代码等等,然后通过管道将这些任务链接在一起。这种方式使得构建前端项目变得非常容易,同时也让开发者能够根据自己的需求定制任务流程。 其次,Gulp有大量的插件可供选择。Gulp的插件系统非常强大,社区中有数以千计的插件可用。这些插件可以帮助开发者解决各种问题,如自动添加浏览器前缀、压缩文件、优化图片等等。开发者可以根据自己的需求选择合适的插件使用,从而提高工作效率。 另外,Gulp还具有良好的生态系统。无论是官方文档还是社区文档,都非常详细且易于理解。开发者可以很容易地找到所需的信息和教程,学习如何使用Gulp来优化自己的工作流程。 总的来说,Gulp是一个功能强大且易于使用的前端自动化工具。它能够帮助开发者提高工作效率,简化开发流程,同时也具有丰富的插件和优秀的生态系统。无论是小型项目还是大型项目,Gulp都是一个非常好的选择。 ### 回答3: Gulp是一个前端自动化工具,用于简化开发流程和提高工作效率。它基于流(stream)的概念,可以自动化处理和优化前端工作中的许多重复任务。 首先,通过在项目中配置gulpfile.js文件,可以定义各种任务(task)和相应的操作。可以使用Gulp来执行各种编译、压缩、合并、重命名、清理等操作,例如压缩CSS和JavaScript文件、编译Sass或Less、优化图像等等。这些任务可以按照开发者的需求进行自定义配置,满足不同项目的要求。 Gulp的使用也非常简单,只需要通过命令行运行gulp命令并指定要执行的任务即可。当有文件变动时,Gulp可以自动监听文件的变化并重新执行相应的任务,实时更新项目的输出。 此外,Gulp还支持插件生态系统,拥有大量的插件可供开发者选择使用。这些插件可以用于执行各种任务,例如自动生成CSS前缀、合并相同类型的文件、启动本地开发服务器等等。 总的来说,Gulp通过简化和自动化前端开发流程,大大提高了开发效率。它的简单易用和丰富的插件生态系统使得开发者能够根据项目需求快速搭建和优化前端工作流程。使用Gulp可以减少重复劳动,提高代码质量和开发效率,因此成为前端开发中不可或缺的工具之一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值