欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Gulp进行代码压缩的步骤以及配置

程序员文章站 2022-07-02 11:39:50
一、安装步骤 1.首先确定是否安装了node.js,如果未安装,请先安装node.js; 2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g; 3.安装gulp: npm install gulp --save-dev;(至于为什么是--save-dev,因为我 ......

一、安装步骤

  1.首先确定是否安装了node.js,如果未安装,请先安装node.js;

  2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g;

  3.安装gulp:  npm install gulp --save-dev;(至于为什么是--save-dev,因为我们只是在开发环境中会用到,生产发布是用不到它的)

  4.安装用于html、css、js代码压缩常用的插件,分别为:gulp-htmlmin、gulp-cssnano、gulp-uglify;

    npm install --save-dev gulp-htmlmin;

    npm install --save-dev gulp-cssnano;

    npm install --save-dev gulp-uglify;

  5.在根目录新建文件 gulpfile.js ,这个文件是使用gulp压缩的配置文件,相关配置如下;

 1 'use strict';
 2 
 3 var gulp = require('gulp');
 4 
 5 //压缩html
 6 var htmlmin = require('gulp-htmlmin');
 7 gulp.task('html', function(){
 8     gulp.src(['./src/app/*.html'])
 9         .pipe(htmlmin({
10             collapseWhitespace: true,//压缩HTML
11             removeComments: true,//清除HTML注释
12             removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
13             removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
14             minifyJS: true,//压缩页面JS
15             minifyCSS: true//压缩页面CSS
16         }))
17         .pipe(gulp.dest('dist/src/app'));
18 });
19 
20 //压缩css
21 var cssnano = require('gulp-cssnano');
22 gulp.task('style', function(){
23     gulp.src(['./css/*.css'])
24         .pipe(cssnano())
25         .pipe(gulp.dest('dist/css'));
26 });
27 
28 //压缩js
29 var uglify = require('gulp-uglify');
30 gulp.task('script', function(){
31     gulp.src(['./src/static/*.js'])
32         .pipe(uglify({
33             mangle: false// 跳过函数名,使其不被压缩,函数名也压缩可改为true
34         }))
35         .pipe(gulp.dest('dist/src/static'));
36 });
37 
38 //同步代码变化
39 gulp.task('dist', function(){
40     gulp.watch(['./src/app/*.html'], ['html']);
41     gulp.watch(['./css/*.css'], ['style']);
42     gulp.watch(['./src/static/*.js'], ['script']);
43 });
44 
45 gulp.task("default", ["html","style","script","dist"]);

  6.初始化得到文件package.json:npm init ;(简单点一路回车即可)

  7.一切妥当,命令行执行gulp,等待完成即可。

  注:(1).这里的配置进行了适当简写,如果项目不是新建立的,而是在项目原有基础上增加页面,为了提升压缩效率可以不匹配所有的html、css、js文件,只配置你新增的文件即可,如下例子:

 1 //压缩html
 2 var htmlmin = require('gulp-htmlmin');
 3 gulp.task('html', function(){
 4     gulp.src(['./src/app/level2HK.html','./src/app/index.html'])
 5         .pipe(htmlmin({
 6             collapseWhitespace: true,//压缩HTML
 7             removeComments: true,//清除HTML注释
 8             removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
 9             removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
10             minifyJS: true,//压缩页面JS
11             minifyCSS: true//压缩页面CSS
12         }))
13         .pipe(gulp.dest('dist/src/app'));
14 });

    gulp.src(['路径a','路径b'])中是支持数组形式入参的,当然也可以直接字符串入参 gulp.src('路径a')

    (2)本处只列举了代码的初步压缩模块,适合刚刚接触gulp的初学者,其实gulp还有其他很多优秀的插件,如代码的合并、混淆等等插件,用户可以根据自己的项目实际需要进行安装并进行相应配置;
    如:代码合并插件    gulp-concat;
      文件名称修改插件  gulp-rename;
      图片压缩插件    gulp-imagemin;
      sass文件编译插件  gulp-sass;
      检查改变状态    gulp-changed;
    如下对js的压缩、合并、修改名称:
  
1 gulp.task('scripts', function() {
2     return gulp.src('./src/static/*.js')
3         .pipe(concat('main.js'))    //合并所有js到main.js
4         .pipe(gulp.dest('./src/static')) //输出main.js到文件夹 
5      .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
6      .pipe(uglify()) //压缩
7      .pipe(gulp.dest('./src/static')); //输出
8 });

    如下对图片的压缩配置:  

 1 // 压缩图片  
 2 gulp.task('images', function () {  
 3     gulp.src('./src/images/*.*')  
 4         .pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))  
 5         .pipe(imageMin({  
 6             progressive: true,// 无损压缩JPG图片  
 7             svgoPlugins: [{removeViewBox: false}]// 不移除svg的viewbox属性  
 8         }))  
 9         .pipe(gulp.dest('dist/images'))  
10         .pipe(browserSync.reload({stream:true}));  
11 });