首页 前端知识 gulp对原生jquery项目的css和js文件进行压缩

gulp对原生jquery项目的css和js文件进行压缩

2024-09-10 23:09:33 前端知识 前端哥 647 117 我要收藏
  1. 安装 Node.js 和 Gulp;

  2. 在项目根目录下创建 package.json 文件并添加项目所需的依赖;

  3. 创建一个名为 gulpfile.js 的文件,并在其中编写任务;
    在这里插入图片描述

  4. 在任务中引入所需的 Gulp 插件,例如 gulp-uglify;

  5. 编写任务来处理 JavaScript 文件,将每个文件的代码都压缩到一个新的文件中。
    node.js官网:https://nodejs.org/en;
    Gulp的安装:
    npm初始化,新建package.json
    npm init -y
    先安装全局
    npm install gulp -g
    再需要在当前项目中安装
    npm install gulp
    这里需要安装gulp-uglify和gulp-clean-css
    npm install --save-dev gulp-uglify
    npm install --save-dev gulp-clean-css

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');

gulp.task('css', function () {
  return gulp.src('./css/*.css')
    .pipe(cleanCSS())
    // .pipe(gulp.dest('./dist/css'));压缩到新目录
    .pipe(gulp.dest('./css'));//替换压缩之前的旧代码
});

gulp.task('js', function () {
  return gulp.src('./js/*.js')
    .pipe(uglify())
    // .pipe(gulp.dest('./dist/js'));压缩到新目录
    .pipe(gulp.dest('./js'));//替换压缩之前的旧代码
});

gulp.task('default', gulp.series(['js','css']));
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18111.html
标签
gulp
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!