首页 > gulp的打包流程是怎么样的呢?

gulp的打包流程是怎么样的呢?

var dotenv = require('dotenv').load();
var gulp = require('gulp');
var concat = require('gulp-concat');
var templateCache = require('gulp-angular-templatecache');
var wrap = require("gulp-wrap");
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');//提示信息
var less = require('gulp-less');
var files = {
  app: ['./app/index.module.js', './app/**/*.js'],
  appTemplates: ['./app/**/*.html'],
  styless: ['./public/less/**/**.less'],
  styles: ['./public/css/**/**.css','./public/less/**/**.css']
}
//angularJs控制器合并
gulp.task('concat', function () {
  return gulp.src(files.app)
    .pipe(wrap('(function(){\n"use strict"\n<%= contents %>\n})();'))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./public/min/'))
      .pipe(notify({ message: 'js合并成功' }))
  //.pipe(browserSync.stream())
})
// 合并、压缩、重命名css
gulp.task('css', function() {
    return gulp.src(['./public/css/**/**.css','./public/less/**/**.css'])
        .pipe(concat('style.css'))
        .pipe(gulp.dest('./public/min/'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minify())
        .pipe(gulp.dest('./public/min'))
        .pipe(notify({ message: 'css压缩执行成功' }));
});

gulp.task('templateCache', function () {
  return gulp.src('./app/**/*.html')
    .pipe(templateCache('templates.js', {name: 'igoCRM', standalone: true}))
    .pipe(gulp.dest('./public/js'))

})

gulp.task('nodemon', function () {
  var called = false;
  nodemon({
    script: 'index.js',
    env: {'NODE_ENV': 'development'}
  })
    .on('crash', function () {
      beep();
      browserSync.exit();
    })
})

gulp.task('default', ['concat',"css",'templateCache'], function () {
  gulp.watch(files.app, ['concat']);
  /*gulp.watch(files.styless, ['less']);*/
  gulp.watch(files.appTemplates, ['templateCache']);
  gulp.watch(files.styles, ['css']);
})


//Beep only for OSX
function beep() {
  var exec = require('child_process').exec;
  exec('afplay /System/Library/Sounds/Glass.aiff');
}

第一次玩gulp,目前项目做到了自动化编译less,压缩合并css和js,但是boos说需要我学习打包,但是说实话我没那个概念。想了很久都不知道gulp自动化打包的构思是如何?
是不是将压缩合并好的css和js加上页面代码根据路径提取出来打包成压缩文件就ok了呢?但是我的API接口是不一样的。
本地调用的Api接口为http形式的,路径为http://172.17.10.31:1350/类似。
当时测试和线上的为https形式的,路径为wwww.baidu.com/api。域名形式的。
目前http和https切换有位大神帮我设置好了

// proxy

var test_host = 'http://139.196.240.36:8081';    //本地http
/*var test_host = '139.224.5.120:443';            //测试https*/
app.use('/api-admin', proxy(test_host, {
    forwardPath: function(req, res) {
        return '/api-admin'+require('url').parse(req.url).path;
    }
}));

只需要将注释在http和https上切换一下就行了。
能问下具体的思路需要用到什么插件模块或者说有没用demo可以参考学习呢?
`


不是很理解你这里说的打包是什么意思,如果只是针对替换api的那个需求的话,可以使用gulp-replacegulp-if。然后通过命令行参数来指定是否是发布版本:

import gulpif       from 'gulp-if';
import replace      from 'gulp-replace';

//导入命令行参数
const argv = require('yargs').argv;

//处理api文件
gulp.task('api', ()=>{
    return gulp.src(src)
        .pipe(gulpif(argv.publish, replace("http://139.196.240.36:8081", "139.224.5.120:443")))
        .pipe(gulp.dest(dest));
});
【热门文章】
【热门文章】