gupl基础配置

最新推荐文章于 2024-05-30 09:45:09 发布

那个小屋

最新推荐文章于 2024-05-30 09:45:09 发布

阅读量424

点赞数

分类专栏：前端自动化构建工具文章标签： gulp

本文链接：https://blog.csdn.net/qq_36634628/article/details/101360405

版权

本文档详细介绍了gulp的基础配置，包括文件目录结构、gulpfile.js的配置步骤和package.json的设置，帮助开发者理解并掌握gulp工作流程。

摘要由CSDN通过智能技术生成

gulp基础配置

一、文件目录

项目文件目录

二、gulpfile.js文件配置

//该gulpfile配置文件具有以下几点功能
//1、压缩html/css/js/images(开发模式下不执行，压缩html/css/js)
//2、删除js调试语句(开发模式下不执行)
//3、less转css、添加css前缀
//4、简易模拟了线上服务器
//5、自动监听、浏览器自动刷新
//使用前在项目文件夹下输入指令gulp
var gulp = require("gulp");
var htmlClean = require("gulp-htmlclean"); //压缩HTML插件
var imageMin = require("gulp-imagemin"); //压缩图片插件
var uglify = require("gulp-uglify"); //js压缩插件
var stripDebug = require("gulp-strip-debug"); //去掉js代码中的调试语句的插件
var concat = require("gulp-concat"); //js文件拼接插件
var less = require("gulp-less"); //less转css插件
var postcss = require("gulp-postcss"); //插件通过多个插件通过管道传递CSS，但是仅解析一次CSS。（不好用，该demo没用）
var autoprefixer = require("gulp-autoprefixer") //添加css前缀插件
var cssnano = require("gulp-cssnano"); //压缩css代码插件
var connect = require("gulp-connect"); //简易模拟服务器插件
// gulp.src()//读文件
// gulp.dest()//写文件
// gulp.task()//创建任务
// gulp.watch()//监听

var devMode = process.env.NODE_ENV == "development"; //接收当前是什么环境ÿ