gulp 打包实例

局部安装

新建目录 gulp_test ，并在该目录下局部安装 gulp ：

 

npm install gulp --save-dev

　　局部安装完后，目录 gulp_test 下出现文件夹 node_modules 。

 

 

安装插件

所需要的插件简介： gulpfile.js

/引入组件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //图片压缩
    // sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    // jshint = require('gulp-jshint'),           //js检查
    uglify = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean');            //清空文件夹
    htmlmin = require('gulp-htmlmin');        //html 处理

　　

目录 gulp_test 下安装插件：

npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

　　安装完插件后，目录 node_modules 下多了7个插件的相应文件夹。

 

1. 在项目根目录 gulp_test 下，新建 gulpfile.js 文件；
2. 在项目根目录 gulp_test 下，新建文件夹 src ,用于存放生产环境代码，并把自己的项目代码放进去；

 

 

package.json    

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^4.0.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.1.1",
    "gulp-uglify": "^3.0.0"
  }
}

安装完，会显示以上依赖信息

 

 

编辑 gulpfile.js 文件

直接上 code ，里面有详细注释：

 

//引入组件
var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //图片压缩
    sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
// jshint = require('gulp-jshint'),           //js检查
    uglify = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean');            //清空文件夹
htmlmin = require('gulp-htmlmin');        //html 处理
//css 压缩
gulp.task('minifycss', function () {
  var cssSrc = './src/css/**/*.css',
      cssDst = './dist/css';
  return gulp.src(cssSrc)                  //被压缩的文件
    //.pipe(rename({ suffix: '.min' }))
      .pipe(minifycss())                       //执行压缩
      .pipe(gulp.dest(cssDst));        //输出文件夹
});

// sass压缩
gulp.task('sass', function () {
  var sassSrc = './src/css/**/*.scss',
      sassDst = './dist/css';
  return sass(sassSrc)
      .pipe(gulp.dest(sassDst))
});

// 图片处理
gulp.task('imagemin', function () {
  var imgSrc = './src/images/**/*',
      imgDst = './dist/images';
  return gulp.src(imgSrc)
      .pipe(imagemin())
      .pipe(gulp.dest(imgDst));
});
// js处理
gulp.task('uglify', function () {
  var jsSrc = './src/js/**/*.js',
      jsDst = './dist/js';
  return gulp.src(jsSrc)
    /*.pipe(jshint('.jshintrc'))
     .pipe(jshint.reporter('default'))*/
    // .pipe(concat('main.js'))
    // .pipe(gulp.dest(jsDst))
    //  .pipe(rename({ suffix: '.min' }))
      .pipe(uglify())
      .pipe(gulp.dest(jsDst));
});
//html 处理
gulp.task('htmlmin', function () {
  var options = {
    removeComments: true,//清除HTML注释
    collapseWhitespace: true,//压缩HTML
    collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
    removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
    minifyJS: true,//压缩页面JS
    minifyCSS: true//压缩页面CSS
  };
  var htmlSrc = './src/**/*.html',
      htmlDst = './dist';
  gulp.src(htmlSrc)
      .pipe(htmlmin(options))
      .pipe(gulp.dest(htmlDst));//同名的html,会直接替换
});
// clean被执行时,先清空对应目录下图片、样式、js
gulp.task('clean', function () {
  //return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
  return gulp.src('./dist')
      .pipe(clean());
});
//watch
// gulp.watch('./src/css/*.css', ['minifycss']);
gulp.task('watch', function () {
  //css
  gulp.watch('./src/css/**/*.css', ['minifycss']);
  //scss
  gulp.watch('./src/css/**/*.scss', ['sass']);
  //js
  gulp.watch('./src/js/**/*.js', ['uglify']);
  //images
  gulp.watch('./src/images/**/*', ['imagemin']);
  //html
  gulp.watch('./src/**/*.html', ['htmlmin']);
});
// 默认预设任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function () {
  gulp.start('minifycss', 'uglify', 'imagemin', 'htmlmin', 'watch','sass');
});

 

 

 

 

执行 gulp

在根目录下，执行命令：

 

gulp

　　

成功会显示

 

 

 

此时的目录结构，原本为空的文件夹 dist 目录，里面出现了被 gulp 处理过各文件。

遇到的一些问题

• 各任务 task 是异步执行的，出现过报错，大概是文件不存在、无法处理；只要在各任务 task 的 pipe管道 前加上 return 即可。
• 将多个监视放在一个任务 task里面时，忘记把该名为 watch 的任务 task 放在：默认预设任务 default 的数组里面；导致文件修改保存后没被监视到。
• 注意 dist 和 src 中代码里的引用的路径、文件名的问题。

更多 gulp 的使用，还得继续在实践应用中摸索啦！

 

转载来源

http://gjincai.github.io/2016/03/15/gulp-%E5%AE%9E%E4%BE%8B-demo/