gulp项目打包

在打包工具中最简单实用的打包工具还是gulp，gulp打包 的应用平台基于node.js ，我们先看看一个基本的静态资源路径。

使用gulp 之前我们需要安装node.js

1. 通过npm install gulp -g  （全局安装）
2. npm init  进行初始化
3. npm   install   gulp   --save-dev  (项目中实用gulp)

       4.在根目录下新建gulpfile.js,我们就可以在gulpfile中进行html，css, js压缩打包，今天主要压缩打包html,css,js,和图片，在gulpfile中首先引入gulp

• var gulp = require('gulp')   ---gulp引入
• var rename= require('gulp-rename');   ---js合并重命名
• var uglify= require("gulp-uglify");   ---js压缩打包

• var minifyHtml= require("gulp-minify-html");   ---html打包压缩

• var imagemin = require('gulp-imagemin');    ---图片压缩打包

• var cssmin = require('gulp-minify-css')    ---css压缩打包

       5. 在4中的gulp-rename、gulp-uglify、gulp-minify-html等都需要先进行安装

•    通过 npm  install  gulp-rename 安装
•    通过 npm  install  gulp-uglify 安装
  
•    通过 npm  install  gulp-minify-html安装
  
•    通过  npm  install gulp-imagemin
•    通过 npm  install   gulp-minify-css 安装

     6.在gulpfile中的具体配置

var gulp = require('gulp')

var rename= require('gulp-rename')

var uglify= require("gulp-uglify");

//js压缩

gulp.task('gulp-js',function() {

    gulp.src('src/js/*.js')

        .pipe(uglify())//压缩

          .pipe(uglify())

        .pipe(gulp.dest('build/js'));

});

gulp.task('default',['gulp-js']);

//HTML压缩

var minifyHtml= require("gulp-minify-html");

gulp.task('minify-html',function() {

    gulp.src('src/*.html')//要压缩的html文件

        .pipe(minifyHtml())//压缩

        .pipe(gulp.dest('build'));

});

gulp.task('default',['minify-html']);

// 图片压缩

var imagemin = require('gulp-imagemin');

gulp.task('uglify-imagemin',function() {

    return gulp.src('src/images/*')

    .pipe(imagemin())

    .pipe(gulp.dest('build/images'));

});

gulp.task('default',['uglify-imagemin']);

//压缩css文件

var cssmin = require('gulp-minify-css')

    gulp.task('gulp-minify-css',function() {

        return gulp.src('src/css/*.css')

       .pipe(cssmin())

       .pipe(gulp.dest('build/css'));

});

gulp.task('default',['gulp-minify-css']);

7.