zoukankan      html  css  js  c++  java
  • 记录下自己写的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());
    });
    

      

  • 相关阅读:
    React 生命周期
    css 多行文本以...代替
    微信JSSDK配置文件说明
    zepto阻止事件冒泡
    PHP 图片处理PNG颜色丢失
    React 学习笔记(一)
    webpack webpack-dev-server使用指南
    为什么需要使用模块打包工具?
    如何实现微信公户绑定公众号业务
    iOS 手势
  • 原文地址:https://www.cnblogs.com/zhuwenjun/p/5619829.html
Copyright © 2011-2022 走看看