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-replace
和gulp-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));
});
这篇关于gulp的打包流程是怎么样的呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文