记录下自己写的gulp打包脚本

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录下自己写的gulp打包脚本相关的知识,希望对你有一定的参考价值。

var c = {
    rootPath: ‘src‘,//项目文件夹
    outputPath: ‘output‘,//文件编译后的输出目录
    revPath: ‘manifest‘,//rev映射文件目录
    appjs: ‘app.js‘,// run JS
    homePage: ‘index.html‘,
    cssFolderPaths: [‘css‘],//需要压缩的CSS目录
    jsFolderPaths: [‘model‘],//需要压缩的JS目录
    ngjsFolderPaths: [‘app‘, ‘common‘, ‘directives‘, ‘filters‘],//需要压缩的ngJS目录
    htmlFolderPaths: [‘app‘, ‘layout‘],
    filterFolderPaths: [‘frameworks‘, ‘images‘]
};


var root = function (path) {
    if (path)
        return c.rootPath + ‘/‘ + path
    return c.rootPath;
};

var output = function (path) {
    if (path)
        return c.outputPath + ‘/‘ + path
    return c.outputPath;
}

var fs = require(‘fs‘);
var path = require(‘path‘);
var gulp = require("gulp"),
  clean = require(‘gulp-clean‘),
  ngAnnotate = require(‘gulp-ng-annotate‘),//压缩ngjs
  util = require(‘gulp-util‘),
  filter = require(‘gulp-filter‘),
  ngmin = require(‘gulp-ngmin‘),
  stripDebug = require(‘gulp-strip-debug‘),
  minifyhtml = require("gulp-minify-html"),//压缩html
  minify = require("gulp-minify-css"),//压缩css
  uglify = require("gulp-uglify"),//压缩代码
  rename = require("gulp-rename"),//重命名
  concat = require("gulp-concat"),//合并代码
  sourcemaps = require("gulp-sourcemaps"),
  rev = require("gulp-rev"),//对文件名加MD5后缀
  revReplace = require("gulp-rev-replace"),//路径替换
  merge = require("merge-stream");


//入口命令
gulp.task(‘run‘, [‘clear‘],
  function () {
      setTimeout(function () {
          gulp.run([
            ‘filter‘,
            ‘css‘,
            ‘html‘,
            ‘global‘,
            ‘model‘,
            ‘ngjs‘], function () {
                var manifest = gulp.src("./" + c.revPath + ‘/*.json‘);
                return gulp.src([root(c.homePage)])
                  .pipe(revReplace({
                      manifest: manifest
                  }))
                  .pipe(gulp.dest(c.outputPath));
            });
      }, 2000);
  });

//所有不需要压缩及合并的目录
gulp.task(‘filter‘, function () {
    return c.filterFolderPaths.map(function (cpath) {
        return gulp.src([root(cpath + ‘/**‘)])
          .pipe(gulp.dest(output(cpath)));
    });
});

//压缩css
gulp.task(‘css‘, function () {
    var tasks = c.cssFolderPaths.map(function (cpath) {
        return gulp.src([root(cpath + ‘/**/*.css‘)])
          .pipe(minify())
          .pipe(rev())
          .pipe(gulp.dest(output(cpath)))
          .pipe(rev.manifest(cpath + ‘.json‘))
          .pipe(gulp.dest(‘./‘ + c.revPath));
    });
    return merge(tasks);
});

//压缩html
gulp.task(‘html‘, function () {
    var tasks = c.htmlFolderPaths.map(function (cpath) {
        return gulp.src([root(cpath + ‘/**/*.html‘)])
          .pipe(minifyhtml())
          .pipe(gulp.dest(output(cpath)));
    });
    return merge(tasks);
});

//压缩global js文件,并替换index.html中的引用
gulp.task(‘global‘, function () {
    return gulp.src([root(‘/*.js‘)])
      .pipe(ngAnnotate())
      .pipe(ngmin({ dynamic: false }))
      .pipe(stripDebug())
      .pipe(uglify({ outSourceMap: false }))//压缩ngjs
    // .pipe(concat(c.appjs))
      .pipe(rev()) //文件名加MD5后缀
      .pipe(gulp.dest(c.outputPath))
      .pipe(rev.manifest(‘global.json‘))//生成manifest.json
      .pipe(gulp.dest(‘./‘ + c.revPath));
});

//压缩model
gulp.task(‘model‘, function () {
    var tasks = c.jsFolderPaths.map(function (cpath) {
        return gulp.src([root(cpath + ‘/**/*.js‘)])
          .pipe(uglify())
          .pipe(rev())
          .pipe(gulp.dest(output(cpath)))
          .pipe(rev.manifest(cpath + ‘.json‘))
          .pipe(gulp.dest(‘./‘ + c.revPath));
    });
    return merge(tasks);
});

//压缩ngjs
gulp.task(‘ngjs‘, function () {
    var tasks = c.ngjsFolderPaths.map(function (cpath) {
        return gulp.src([root(cpath + ‘/**/*.js‘)])
          .pipe(uglify())
          .pipe(rename(function (path) {
              if (path.basename.toLowerCase().indexOf(‘login‘) > -1) {
                  path.basename = path.basename.toLowerCase();
              }
              return path;
          }))
          .pipe(rev())
          .pipe(gulp.dest(output(cpath)))
          .pipe(rev.manifest(cpath + ‘.json‘))
          .pipe(gulp.dest(‘./‘ + c.revPath));
    });
    return merge(tasks);
});

//清理目录
gulp.task(‘clear‘, function () {
    gulp.src(c.outputPath, { read: false })
      .pipe(clean());
    gulp.src(c.revPath, { read: false })
      .pipe(clean());
    gulp.src([‘dist‘, ‘rev‘], { read: false })
      .pipe(clean());
    //gulp.src(root(‘/**/*.*scc‘), { read: false })
     // .pipe(clean());
});

  

以上是关于记录下自己写的gulp打包脚本的主要内容,如果未能解决你的问题,请参考以下文章

GruntGulp区别 webpack requirejs区别

针对Jquery老项目使用gulp进行打包

gulp.js 基于流的自动化构建工具,对小程序代码进行打包

gulp打包压缩js代码

gulp打包---文件整体移动

gulp打包