如何打包发布-Gulp

如何打包发布-Gulp

压缩

在线压缩工具

https://javascript-minifier.com/

使用Node.js打包

Grunt (自动化构建工具)

Gulp (自动化构建工具)

Webpack (静态资源打包工具)

Gulp

ulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器

安装gulp

在windows下一定要注意,最好使用cnpm进行安装,

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

再安装gulp

cnpm install gulp -g

安装后会在工程根目录下出现一个package.json的文件

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "我的项目描述",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "[email protected]"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

安装gulp的相关插件

cnpm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-c
sso --save-dev

合并压缩

工程根目录下创建一个gulpfile.js的文件,并输入

var gulp = require('gulp');
var rev = require('gulp-rev');//添加版本号
var revReplace = require('gulp-rev-replace');//更新index.html下的引用
var useref = require('gulp-useref');//合并css或js文件
var filter = require('gulp-filter');//筛选和恢复
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});
    var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});

    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'));

});

打包之后会在工程根目录中生成dist的文件夹 ,大功告成

--END--