-

gulp使用:进行压缩合并js、css(图文教程)

自动化构建工具,可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。
中文文档网址:https://www.gulpjs.com.cn/

gulp安装
npm init -y 创建package.json
npm install gulp -g 全局安装gulp
创建配置文件 gulpfile.js
npm install gulp --save-dev 将多个文件合并为一个
npm install gulp-concat --save-dev 将多个文件合并为一个
npm install gulp-uglify --save-dev 压缩js文件
npm install gulp-header --save-dev 添加头部
npm install gulp-footer --save-dev 添加底部
npm install gulp-replace --save-dev 添加替换
npm install gulp-zip --save-dev 打包
npm install gulp-gbk-convert --save-dev 转gbk编码
npm install gulp-imagemin@7.0.0 --save-dev 图像插件(更高版本在gulp里引入不了)
npm install moment --save-dev 处理日期和时间
cnpm i gulp gulp-concat gulp-uglify gulp-header gulp-footer gulp-replace gulp-zip gulp-gbk-convert gulp-imagemin@7.0.0 --save-dev 以cnpm方法统一全部生成

gulpfile.js配置
gulpfile.js文件内容如下

var gulp = require('gulp');
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩js文件
var header = require('gulp-header');//添加标头
//注释
var note = [
  '/*! xiyueta v1.3.8 | Author xiyueta Adream | MIT License By http://xiyueta.com/  */\n'
]
  
var src = 'src/'
var dist = 'dist/'
gulp.task('main', function () {
  gulp.src([src + 'class_Author.js', src + 'class_BendText.js'])
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(header.apply(null, note))
    .pipe(gulp.dest(dist))
});

执行gulp动作
1、在cmd中输入:gulp main
2、或创建批处理文件auto.bat
@echo off
gulp main
pause