什么是 gulp
gulp 是前端开发过程中对代码进行自动化构建的利器它不仅能对资源进行优化, 而且在开发过程中能够通过配置自动完成很多重复的任务, 让我们可以专注于代码, 提高工作效率
安装 gulp
cnpm install gulp -g
安装 gulp 依赖
- cnpm install gulp --save-dev //gulp 依赖
- cnpm install gulp-uglify --save-dev //js 压缩依赖
- cnpm install gulp-clean-CSS --save-dev //css 压缩依赖
gulp 目录结构
gulpfile 代码
- var gulp = require('gulp'); // 引入 gulp 模块
- var uglify = require('gulp-uglify'); // 引入 gulp-uglify 模块
- var cleanCss = require('gulp-clean-css'); // 引入 gulp-clean-css 模块
- gulp.task('min-js',function(){
- gulp.src('src/js/*.js') // 匹配所有 src/js 目录下的 js 文件
- .pipe(uglify()) // 进行 js 压缩处理
- .pipe(gulp.dest('dist/js')); // 指定压缩文件存放的目录为 dist/js
- });
- gulp.task('min-css',function(){
- gulp.src('src/css/*.css') // 匹配所有 src/css 目录下的 css 文件
- .pipe(cleanCss()) // 进行 css 压缩处理
- .pipe(gulp.dest('dist/css')); // 指定压缩文件存放的目录为 dist/css
- });
执行 gulp
- gulp min-css // 开始 min-css 对应的 task
- gulp min-js // 开始 min-css 对应的 task
来源: https://www.2cto.com/kf/201803/726995.html