介绍
clgulp是一个基于gulp的npm包，它提供了很多实用的脚手架和代码片段，可以极大的提升前端开发效率。本文将介绍如何在项目中使用clgulp，并通过一些实例来阐述它的使用方法和指导意义。
安装
使用npm安装clgulp：
npm install clgulp --save-dev
使用
初始化
在项目的根目录下，创建一个gulpfile.js文件，并在其中引入clgulp：
const gulp = require('gulp');
const clgulp = require('clgulp')(gulp);clgulp接收gulp实例作为参数，然后返回一个对象，这个对象包含了许多实用的任务。
常用任务
html
通过html任务，可以将html文件打包到指定目录下：
gulp.task('html', function() {
return clgulp.html({
src: 'src/*.html',
dest: 'dist'
});
});css
通过css任务，可以将sass文件编译成css，然后打包到指定目录下：
gulp.task('css', function () {
return clgulp.css({
src: 'src/scss/**/*.scss',
dest: 'dist/css'
})
});js
通过js任务，可以将es6代码编译成浏览器可以运行的js代码，然后打包到指定目录下：
gulp.task('js', function () {
return clgulp.js({
src: 'src/js/**/*.js',
dest: 'dist/js'
});
});images
通过images任务，可以将图片打包到指定目录下：
gulp.task('images', function () {
return clgulp.images({
src: 'src/images/**/*',
dest: 'dist/images'
});
});fonts
通过fonts任务，可以将字体文件打包到指定目录下：
gulp.task('fonts', function () {
return clgulp.fonts({
src: 'src/fonts/**/*',
dest: 'dist/fonts'
});
});watch
通过watch任务，可以监听文件改动，在文件改动时自动执行相应的任务：
gulp.task('watch', function () {
gulp.watch('src/*.html', ['html']);
gulp.watch('src/scss/**/*.scss', ['css']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.watch('src/images/**/*', ['images']);
gulp.watch('src/fonts/**/*', ['fonts']);
});总结
通过引入clgulp，可以简化项目开发过程中的许多重复工作，提高开发效率，减少错误。本文介绍了如何使用clgulp，我相信这些知识会对前端开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f180a9e403f2923b035c405