-

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

自动化构建工具,可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。

gulp安装
npm init创建package.json
npm install gulp -g 全局安装gulp
创建配置文件 gulpfile.js
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编码

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.1.9.2 | Author xiyueta Adream | MIT License By http://xiyueta.com/  */\n'
]

var src='../xiyueta/js/'
gulp.task('main', function () {
  gulp.src([src+'xiyueta.js',src+'xiyueta.css.js',src+'common.js',src+'handle.js',src+'url.js',src+'tpl.js',src+'xiyueta.function.js'])
    .pipe(concat('xiyueta.min.js'))
    .pipe(uglify())
    .pipe(header.apply(null, note))
    .pipe(gulp.dest(src))
});

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