什么是 tactile-gulp?
tactile-gulp 是一款基于 gulp 的前端工具集，它能够帮助我们更加轻松地进行前端开发。该工具包含了一些常用的插件和工具，例如自动编译 less、自动压缩图片、自动合并 JS 文件等。使用 tactile-gulp 可以省去很多重复繁琐的工作，同时增加开发效率。
准备工作
首先，我们需要安装 Gulp，如果你还没有安装的话，可以按照以下命令进行安装：
npm install gulp-cli -g npm install gulp -D
接着，我们需要在项目根目录下创建 package.json 文件：
npm init -y
然后，我们需要在该文件中添加以下配置：
"scripts": {
"dev": "gulp",
"build": "gulp build"
},
"devDependencies": {
"tactile-gulp": "^1.0.0"
}这里的 "dev" 和 "build" 是我们即将要用到的两个命令，分别用来启动开发环境和编译打包代码。"devDependencies" 则是记录我们需要安装的依赖项。
接下来，我们可以通过以下命令安装 tactile-gulp：
npm install tactile-gulp -D
使用方法
配置文件
在我们开始使用 tactile-gulp 之前，需要先创建一个 gulpfile.js 的配置文件。在这个文件中，我们可以指定一些需要执行的任务以及相关的任务配置。
const gulp = require('gulp');
const tactile = require('tactile-gulp');
tactile(gulp, {
// 配置项
});自动编译 less
在 gulpfile.js 中添加以下配置，即可自动编译 less：
-- -------------------- ---- -------
------------- -
------- -
---- --------------------- -- ---- ------
----- ----------- -- ---- --- -------
-------- -
------------- - -- ---- --- --
----- ----
--
-------- -- -- -- ---
-
-
---自动压缩图片
在 gulpfile.js 中添加以下配置，即可自动压缩图片：
tactile(gulp, {
images: {
src: 'src/img/**/*.{png,jpg,jpeg,gif,svg}', // 图片文件的源路径
dist: 'dist/img' // 压缩后的图片的输出路径
}
});自动合并 JS 文件
在 gulpfile.js 中添加以下配置，即可自动合并 JS 文件：
tactile(gulp, {
scripts: {
src: 'src/js/*.js', // JS 文件的源路径
dist: 'dist/js' // 合并后的 JS 文件的输出路径
}
});运行项目
运行以下命令，即可启动开发环境：
npm run dev
运行以下命令，即可进行代码编译打包：
npm run build
总结
tactile-gulp 是一款非常实用的前端工具集，它能够帮助我们更加轻松地进行前端开发。使用 tactile-gulp，可以省去很多重复繁琐的工作，同时增加开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7581e8991b448e5f21