前端 - gulp应用

说明

gulp用于搭建小的前后端分离中的前端项目还是挺合适的，如果你不使用诸如Vue、React、AngularJS等提供的脚手架框架，那么使用gulp来做js、css、图片等的压缩合并等处理就非常合适了。诸如gulp的第三方服务年年都有很大的变化，用法上变化也很大，具体用法还需要以最新的官方为准。中文官方地址：https://www.gulpjs.com.cn/ 笔者用到的gulp版本为：4.0.2

使用

npm install gulp // 全局安装gulp程序（必须）npm install --save-dev gulp // 将gulp安装到项目中（必须）在项目根目录下新建gulpfile.js

定义任务

在gulpfile.js中定义定时任务，如下：

const gulp = require('gulp'); const babel = require('gulp-babel'); const less = require('gulp-less'); const minCss = require('gulp-minify-css'); const rename = require('gulp-rename'); const uglify = require('gulp-uglify'); const imagemin = require('gulp-imagemin'); /** * 编译js * - es6转es5 * - 压缩 * - 合并 * @author Caesar Liu * @date 2019/5/25 22:38 */ gulp.task('compileJs', function(){ return gulp.src('./src/js/**/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest("./dist/js")); }); /** * 编译less * - less转css * - 压缩 * @author Caesar Liu * @date 2019/5/25 22:50 */ gulp.task('compileLess', function() { return gulp.src('./src/less/**/*.less') .pipe(less()) .pipe(minCss()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('./dist/css')) }); /** * 编译图片 * - 压缩 * @author Caesar Liu * @date 2019/5/25 22:51 */ gulp.task('compileImages', function() { return gulp.src('./src/images/**/*') .pipe(imagemin()) .pipe(gulp.dest('./dist/images')) }); /** * 编译 * @author Caesar Liu * @date 2019/5/26 00:33 */ gulp.task('compile', gulp.series(gulp.parallel('compileJs', 'compileLess', 'compileImages'))); /** * 监听源文件 * @author Caesar Liu * @date 2019/5/25 22:38 */ gulp.task('watch',function(){ gulp.watch('./src/js/**/*.js', gulp.parallel('compileJs')); gulp.watch('./src/less/**/*.less', gulp.parallel('compileLess')); gulp.watch('./src/images/**/*', gulp.parallel('compileImages')); }); gulp.task('default', gulp.series(gulp.parallel('watch')));

执行

任务定义以后，就可以直接运行gulp来调用定义的default任务，如果需要指定任务执行，就可以使用gulp <task name>来执行选定的任务。

插件的查找和使用

查找：https://www.npmjs.com/search?q=keywords:gulpplugin 使用：点击你需要使用的插件，插件详情会有具体的使用步骤