glup合并压缩js及css

step1:
$ npm install gulp -g
step2:
$ npm install gulp-notify gulp-minify-css gulp-concat gulp-uglify gulp-rename del –save-dev
——————————————————————————————————————-
gulpfile.js文件
例：

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    del = require('del');


gulp.task('minifycss', function() {
    return gulp.src(['./styles/amazeui.css', 
        './styles/wangEditor.css', 
        './styles/admin.css', 
        './styles/amazeui.datatables.css'])
        .pipe(concat('xf.css'))   
        .pipe(gulp.dest('./styles/dist'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('./styles/dist'))
        .pipe(notify({ message: 'Styles task complete' }));
});


gulp.task('minifyjs', function() {
    return gulp.src(['./scripts/jquery.js', 
        './scripts/libs/Chart.bundle.min.js', 
        './scripts/libs/amazeui.js', 
        './scripts/libs/webuploader.js', 
        './scripts/libs/amazeui.datatables.js', 
        './scripts/libs/template.js', 
        './scripts/libs/wangEditor.js', 
        './scripts/libs/jquery.twbsPagination.min.js'])
        .pipe(concat('xf.js'))    //合并所有js到main.js
        .pipe(gulp.dest('./scripts/dist'))    //输出main.js到文件夹
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('./scripts/dist'))
        .pipe(notify({ message: 'Scripts task complete' }));
});

gulp.task('clean', function() {
    del(['./styles/dist/*.*','./scripts/dist/*.*']);
});

gulp.task('default', ['clean'], function() {
    console.log(">>>>>>start.");
    gulp.start('minifycss', 'minifyjs');
    console.log(">>>>>>end.");
});

——————————————————–
执行node gulpfile即可

欢迎分享本文，转载请保留出处：前端ABC » glup合并压缩js及css