gulp 压缩合并文件

本文记录了在开发过程中用到的gulp使用方法。

安装

1、初始化

npm init

2、安装gulp及依赖工具

npm install gulp --save
npm install gulp-util --save
npm install gulp-concat --save
npm install gulp-minify-css --save
npm install gulp-rename --save
npm install gulp-uglify --save

使用

1、创建 gulp.js，如下：

var gulp = require('gulp');
var gutil = require('gulp-util');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');


var jsPath = [
    '/PATHTO/js/file.js',
    '/PATHTO/js/tools/*.js'
];

var cssPath = [
    '/PATHTO/css/core.css',
    '/PATHTO/css/*.css'
];

var htmlPath = [
    '/PATHTO/templates/index.html',
    '/PATHTO/templates/*.html'
];

gulp.task('minifyCss', function(done) {
    gulp.src(cssPath)
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/css'))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./dist/css'))
        .on('end', done);
});

gulp.task('minifyJs', function(done) {
    gulp.src(jsPath)
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
        .on('end', done);
});

gulp.task('minifyHtml', function(done){
    gulp.src(htmlPath)
        .pipe(concat('main.html'))
        .pipe(gulp.dest('./dist/'))
        .on('end', done);
});

gulp.task('default', ['minifyCss', 'minifyJs']);

gulp.task('watch', function() {
    gulp.watch([cssPath, jsPath], ['minifyCss', 'minifyJs']);
});

2、终端中，可以使用如下命令：

gulp // 此命令运行默认的 task
gulp minifyCss // 此命令运行名称为 minifyCss 的 task
gulp watch // 监听文件改变，自动执行任务