gulp 安装 配置 使用
程序员文章站
2022-03-07 21:13:37
gulp 一个前端自动化构建工具安装gulp首先 检查 node、npm 和 npx 是否正确安装node --version npm --version npx --version安装 gulp 命令行工具npm install --global gulp-cli ( 全局安装gulp)2.准备一个项目(以下所有操作都在该项目的根目录中进行)dist (放置优化后的代码,便于上线)src (放置源代码,后期维护只在src中)1> 对项目...
gulp 一个前端自动化构建工具
-
安装gulp
首先 检查 node、npm 和 npx 是否正确安装
node --version npm --version npx --version
安装 gulp 命令行工具
npm install --global gulp-cli ( 全局安装gulp)
2.准备一个项目(以下所有操作都在该项目的根目录中进行)
dist (放置优化后的代码,便于上线)
src (放置源代码,后期维护只在src中)
1> 对项目进行打包: npm | cnpm init [-y]
2> 安装本地gulp及需要的插件: (本地安装的插件一个项目,就需要安装一次)
(插件地址: https://gulpjs.com/plugins/ )npm | cnpm install --save-dev gulp 本地安装gulp npm | cnpm install --save-dev 插件名
3> 在项目根目录中创建一个 gulpfile.js 的配置文件
-
导入所需模块 (安装了哪些就导入哪些,这里我导入的是我安装的)
const gulp = require('gulp'); const html = require('gulp-htmlmin'); const cssnano = require('gulp-cssnano'); const rename = require('gulp-rename'); const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const imgmin = require('gulp-imagemin'); const babel = require('gulp-babel');
-
发布任务(注意:任务里的文件路径根据自己实际的文件名去定义)
//copy 首页的任务 function fnCopyIndex(){ return gulp.src('./src/index.html') .pipe(gulp.dest('./dist')); } //处理css的任务 function fnCss(){ return gulp.src('./src/sass/*.css') .pipe(cssnano()) .pipe(rename({suffix : '.min'})) .pipe(gulp.dest('./dist/css')); } //处理js的任务 function fnJS(){ return gulp.src('./src/js/*.js') .pipe(babel({ presets: ['@babel/env'] })) .pipe(concat('index.js')) .pipe(uglify()) .pipe(rename({suffix : '.min'})) .pipe(gulp.dest('./dist/js')); } //处理图片的任务 function fnImg(){ return gulp.src('./src/img/*') .pipe(imgmin()) .pipe(gulp.dest('./dist/img')); } //处理html页面 function fnHTML(){ return gulp.src('./src/pages/*.html') .pipe(html()) .pipe(gulp.dest('./dist/pages')); } //监听任务 function fnWatch(){ gulp.watch('./src/index.html',fnCopyIndex); gulp.watch('./src/sass/*.css',fnCss); gulp.watch('./src/js/*.js',fnJS); gulp.watch('./src/pages/*.html',fnHTML); }
-
导出模块
exports.copyIndex = fnCopyIndex; exports.css = fnCss; exports.js = fnJS; exports.img = fnImg; exports.html = fnHTML; exports.default = fnWatch;
-
4> 运行任务
1.gulp 任务名 (例:gulp fnCss)
2.如果是default任务名,那么只运行: gulp
5> 注:
1》》在运行监听任务前,一定要先运行其它的单任务
2》》如果代码有错,则自动退出监听
本文地址:https://blog.csdn.net/qq_44888024/article/details/111855438
下一篇: css动画:animation的常用样式