gulp的简单使用

最新推荐文章于 2024-06-04 17:50:02 发布

原创最新推荐文章于 2024-06-04 17:50:02 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gulp

工具专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何通过Gulp工具实现前端项目的自动化构建流程，包括全局安装、配置及使用常见插件如gulp-uglify、gulp-imagemin、gulp-csso等进行JS、CSS、图片等资源的压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步全局安装 gulp，

npm gulp -g

全局安装后，使用 npm init 初始化，它自动创建 package.json，然后还需要在项目目录下安装（总共需要安装两次），

npm install gulp –save-dev

可以看到项目目录下的 package.json 依赖项会多出一个gulp（以及它的版本号）。
项目分为两个目录，一个是dist文件夹（生产环境目录），一个是src文件夹（开发目录）。
在前端开发中使用gulp，一般是js、css、html、图片等压缩（不太用less、sass）；
所以接下来是安装插件
比如js压缩需要安装 gulp-uglify ，图片压缩 gulp-imagemin，css压缩 gulp-csso

使用方法：
需要先引用，使用require

var cssminify = require(‘gulp-csso’);

gulp.task创建任务

gulp.task('cssminifys',function () {
    gulp.src('src/css/*.css')
        .pipe(cssminify())
        .pipe(gulp.dest('dist/css'))
});

监听任务

gulp.task('default',function () {
   gulp.watch('src/css/*.css',['cssminifys'])
});

其他插件使用方法大致如此，那些复杂功能的插件，本人也没有使用过，没有机会去使用，一般的插件都可以在网上能够搜到