使用gulp打包工具

需要环境node+npm

下载gulp包和它的一些组件

  1. 初始化npm创建package.json:npm init
  2. 下载gulp:npm install [-g全局安装] gulp -save-dev(更新到开发环境)
  3. 下载gulp一些组件
    1. gulp-csso 压缩css代码组件
    2. gulp-filter 文件筛选组件
    3. gulp-rev 添加版本,添加哈希值到文件
    4. gulp-rev-replace 更新引用
    5. gulp-uglify 压缩js代码
    6. gulp-useref 添加注释合并文件
    7. 代码:npm install gulp-csso gulp-filter gulp-rev gulp-rev-replace gulp-uglify gulp-useref -save-dev(更新到开发环境)

配置与使用gulp来打包

  1. 在html文件中配置要合并那些js和css文件
    1. 合并css
      1. 使用<!-- build:css css/combined.css -->来开始,css/combined.css:目录/合并文件名
      2. 结束使用<!-- endbuild -->
    2. 合并js
      1. 使用<!-- build:js js/combined.js -->来开始,js/combined.js:目录/合并文件名
      2. 结束使用<!-- endbuild -->
  2.  在项目根目录下面创建gulpfile.js
    1. var gulp = require('gulp');
      var rev = require('gulp-rev');//添加版本号 作用:添加哈希码修改文件名
      var revReplace = require('gulp-rev-replace');//更新引用
      var useref = require('gulp-useref');//自动合并文件,添加注释
      var filter = require('gulp-filter');//文件筛选,restore 恢复到流
      var uglify = require('gulp-uglify');//压缩js代码
      var csso = require('gulp-csso');//压缩css代码
      gulp.task('default',function () {
       var jsFilter = filter('**/*.js',{restore:true});
       var cssFilter = filter('**/*.css',{restore:true});
       //不包含index.html
       var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true});
       //dist为生成包的目录
       return gulp.src('src/index.html')
       .pipe(useref())
       .pipe(jsFilter)
       .pipe(uglify())
       .pipe(jsFilter.restore)
       .pipe(cssFilter)
       .pipe(csso())
       .pipe(cssFilter.restore)
       .pipe(indexHtmlFilter)
       .pipe(rev())
       .pipe(indexHtmlFilter.restore)
       .pipe(revReplace())
       .pipe(gulp.dest('dist'))
      });

       

  3. 在控制带输入gulp,他会默认执行叫做default的方法
1 分享 二维码
分类:记录
还没有评论


在此输入评论..
0/100