gulp css html image js 合并压缩

安装node.js  npm  以及安装gulp等方法我就不在这里赘述了。

接下里我主要介绍的是Gulpfile文件里面的配置该如何书写。

var gulp = require(‘gulp‘);//引入gulp组件

// 引入组件//在引入这些组件前你需要在你的项目里进行安装。举个栗子：组件中间用空格隔开。一定要先切换到你项目所在的目录

//npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

var htmlmin = require(‘gulp-htmlmin‘), //html压缩    imagemin = require(‘gulp-imagemin‘),//图片压缩    pngcrush = require(‘imagemin-pngcrush‘),    minifycss = require(‘gulp-minify-css‘),//css压缩    jshint = require(‘gulp-jshint‘),//js检测    uglify = require(‘gulp-uglify‘),//js压缩    concat = require(‘gulp-concat‘),//文件合并    rename = require(‘gulp-rename‘),//文件更名    notify = require(‘gulp-notify‘);//提示信息

// 压缩htmlgulp.task(‘html‘, function() {    return gulp.src(‘src/*.html‘)        .pipe(htmlmin({collapseWhitespace: true}))        .pipe(gulp.dest(‘./dest‘))        .pipe(notify({ message: ‘html task ok‘ }));

});

// 压缩图片gulp.task(‘img‘, function() {    return gulp.src(‘src/images/*‘)        .pipe(imagemin({            progressive: true,            svgoPlugins: [{removeViewBox: false}],            use: [pngcrush()]        }))        .pipe(gulp.dest(‘./dest/images/‘))        .pipe(notify({ message: ‘img task ok‘ }));});

// 合并、压缩、重命名cssgulp.task(‘css‘, function() {    return gulp.src(‘src/css/*.css‘)        .pipe(concat(‘main.css‘))        .pipe(gulp.dest(‘dest/css‘))        .pipe(rename({ suffix: ‘.min‘ }))        .pipe(minifycss())        .pipe(gulp.dest(‘dest/css‘))        .pipe(notify({ message: ‘css task ok‘ }));});

// 检查jsgulp.task(‘lint‘, function() {    return gulp.src(‘src/js/*.js‘)        .pipe(jshint())        .pipe(jshint.reporter(‘default‘))        .pipe(notify({ message: ‘lint task ok‘ }));});

// 合并、压缩js文件gulp.task(‘js‘, function() {    return gulp.src(‘src/js/*.js‘)        .pipe(concat(‘all.js‘))        .pipe(gulp.dest(‘dest/js‘))        .pipe(rename({ suffix: ‘.min‘ }))        .pipe(uglify())        .pipe(gulp.dest(‘dest/js‘))        .pipe(notify({ message: ‘js task ok‘ }));});

// 默认任务gulp.task(‘default‘, function(){    gulp.run(‘img‘, ‘css‘, ‘lint‘, ‘js‘, ‘html‘);

    // 监听html文件变化    gulp.watch(‘src/*.html‘, function(){        gulp.run(‘html‘);    });

    // Watch .css files    gulp.watch(‘src/css/*.css‘, [‘css‘]);

    // Watch .js files    gulp.watch(‘src/js/*.js‘, [‘lint‘, ‘js‘]);

    // Watch image files    gulp.watch(‘src/images/*‘, [‘img‘]);});