gulp 压缩合并Css 混淆压缩js

使用Gulp压缩CSS与JS

最新推荐文章于 2021-06-26 16:48:37 发布

原创最新推荐文章于 2021-06-26 16:48:37 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#gulp压缩css #gulp混淆压缩js

gulp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Gulp工具进行CSS和JS文件的压缩与混淆，包括环境搭建、所需库的安装及具体实现代码。通过Gulp可以有效地减小文件体积，提高网页加载速度。

gulp 压缩css 混淆压缩js

1.安装gulp环境
(配置global环境和项目环境)

npm install gulp -g  
npm install gulp --save-dev

2.安装所需要的库

npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev

3.压缩混淆代码:


var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint = require('gulp-jshint'); //需求库引入

//压缩css
gulp.task('minifycss', function () {
    return gulp.src('static/css/*.css')    //需要操作的文件
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(minifycss())   //执行压缩
        .pipe(gulp.dest('dist/css'));   //输出文件夹
});

//压缩,合并 js
gulp.task('minifyjs', function () {
    return gulp.src('static/js/*.js')      //需要操作的文件
        .pipe(uglify())    //压缩
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(gulp.dest('dist/js'));       //输出到文件夹
});

//默认命令，在cmd中输入gulp后，执行的就是这个任务(压缩js需要在检查js之后操作)
gulp.task('default', [], function () {
    gulp.start('minifycss', 'minifyjs');
});