gulp&Wepback打包

gulp

• 一款 nodejs 的应用
• 用来构建前端自动化工作流
• 可以实现实现代码的打包、压缩、合并、转译等
• 拥有很丰富的插件系统

安装

npm install -g gulp

如果报错：Error: EACCES, open '/Users/xxx/xxx.lock
先执行：sudo chown -R $(whoami) $HOME/.npm 开启管理员

使用

//安装插件
npm install gulp-imagemin --save-dev //图片压缩
npm install gulp-cssnano --save-dev //css压缩
npm install uglify --save-dev //js压缩
npm install gulp-jshint --save-dev //js规范检查
npm install gulp-concat --save-dev //文件合并
npm install gulp-rename --save-dev //重命名

//gulpfile.js
//引入插件
var gulp = require('gulp'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),

  //css合并压缩
  gulp.task('build:css', function() {
      gulp.src('./src/css/*.css')
        .pipe(concat('merge.css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/'));
  })

  //js合并压缩
   gulp.task('build:js', function() {
      gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
  })

  //图片压缩
  gulp.task('build:image', function() {
      gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs/'));
  })

gulp.task('build', ['build:css', 'build:js', 'build:image']);

//命令行
gulp build

webpack

• webpack是一款模块加载器兼打包工具，它能把各种资源JS/CSS/图片等都作为模块来使用和处理
• 用 commonJS 来书写，对 AMD/CMD 支持也很全面
• 方便其他模块也兼容使用，扩展性强，插件机制完善，能被模块化处理的资源多
• 开发便捷，能替代部分 grunt/gulp 的工作，比如打包，压缩
• webpack 支持 AMD 和commonJS 和 ES modules

安装

npm install webpack --save-dev

使用

//webpack.config.js
    
module.exports = {
  entry: "./app.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname,//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}