gulp 自动化构建工具
程序员文章站
2024-02-25 11:45:52
...
一、gulp 和webpack 的区别
前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack。
grunt 和gulp 是一个优化前端流程的工具,而webpack是一个预编译模块的方案同时也是一个打包工具。具体关系如下图:
js的规范有两个 AMD 和CMD,在线编译模块方案分为requireJs 和seaJs,预编译模块方案分为:browserify 和webpack(也用于打包),自动化工具Gulp和Grunt。
二、gulp 的安装
需要node环境 ,node安装好后,再用npm指令安装。
安装指令:
npm install --global gulp
开发依赖安装
npm install --save-dev gulp
创建一个gulpfile.js文件
var gulp = require('gulp');
gulp.task('default',function(){
//放入默认任务代码
});
运行gulp指令
gulp
三、gulp 任务配置
配置任务前,引入一些常用的模块。
var browserify = require('browserify'),
gulp = require('gulp'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
gutil = require('gulp-util'),
less = require('gulp-less'), //less编译
sourcemaps = require('gulp-sourcemaps'), //编译less时生成额外的.map文件,便于开发环境时用chrome来映射查找样式对应的less
autoprefixer = require('gulp-autoprefixer'), //设置浏览器版本自动处理浏览器前缀
minifyCSS = require('gulp-minify-css'), //压缩 CSS
uglify = require('gulp-uglify'), //js压缩
imagemin = require('gulp-imagemin'), //image压缩
cache = require('gulp-cache'), //配合gulp-imagemin使用,只压缩修改的图片
clean = require('gulp-clean'), //清理文件
browserSync = require('browser-sync').create(), //刷新
proxyMiddleware = require('http-proxy-middleware'), //反向代理
concat = require('gulp-concat'),
shell = require('gulp-shell'),
babel=require('gulp-babel'),
amdOptimize = require('amd-optimize');
处理less文件的任务配置:
gulp.task('less-dev' , function () {
gulp.src('css/less/**.less') //less源文件
.pipe(sourcemaps.init()) //生成map文件,用于报错时映射到对应的代码行
.pipe(less())//less 文件编译
.pipe(sourcemaps.write('./', {includeContent: false}))
.pipe(gulp.dest('css/')) //编译后的文件存放路径
});
gulp.task('less' , function () {
gulp.src(['src/css/**.css'])
.pipe(minifyCSS()) //压缩编译后的css
.pipe(gulp.dest('dist/css/')) //存放到生产环境目录下
});
js 文件的处理:
gulp.task('js' , function () {
gulp.src('src/js/**.js') //指定源路径下的所有js文件
.pipe(concat("index.js")) //合并所有的js文件
.pipe(babel({
presets: ['es2015'] //使用支持es6语法的模块
}))
.pipe(uglify().on('error', function(err){
gutil.log(err);
this.emit('end');
}))//压缩js源码
.pipe(gulp.dest('./dist/js'));存放到生产环境
});
图片处理任务:
gulp.task('images', function() {
gulp.src('src/images/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
})))
.pipe(gulp.dest('dist/images'));
});
html 文件处理:
gulp.task('html', function() {
gulp.src(['src/*.ico', 'src/**/**.html', 'src/json/*.json'])
.pipe(gulp.dest('dist/'));
});
第三方库文件处理:
gulp.task('vendor', function() {
gulp.src(['src/vendor/**'],{base:'./src'})
.pipe(gulp.dest('dist/'));
})
clean 任务:
gulp.task('clean', function() {
gulp.src(['dist'], {
read: false
})
.pipe(clean());
});
合并任务流的指令:
gulp.task('watch' , function() {
gulp.start('html', 'less', 'js', 'images', 'vendor');
});
在指令窗口敲gulp watch,就会依次 html less js images vendor 的相关任务。
服务器代理额配置和热更新:
gulp.task('watch-dev', function() {
gulp.watch('src/css/less/**.less', ['less-dev']);
gulp.watch('src/**/**.js', ['js']);
gulp.watch('src/**/**.html', ['html']);
var middleware = [
proxyMiddleware(['/api'], {target: "http://x.x.x.x:8080", changeOrigin: true, pathRewrite: {
'^/api' : '/' // rewrite paths
}}),
];
var files = [
'src/**.html',
'src/css/**.css',
'src/images/*.{png,jpg,gif,ico}',
'src/**/**.js'
];
browserSync.init({
server: {
baseDir: './dist',
port: 3000,
middleware: middleware
},
rewriteRules: [
{
match: /dynamic-text-news.html/g,
fn: function (match) {
gutil.log("browserSync rewrite for " + match);
return 'kittenz';
}
}],
startPath: './index.html'
});
var reload = browserSync.reload;
gulp.watch(files, reload);
});
参考:
1.https://www.zhihu.com/question/37020798
2.http://www.gulpjs.com.cn/docs/getting-started/
推荐阅读
-
gulp 自动化构建工具
-
gulp自动化构建工具
-
gulp自动化构建工具(二):简单的项目实践
-
gulp--自动化构建工具学习笔记
-
使用Jenkins Pipeline自动化构建发布Java项目的方法
-
使用Jenkins配置Git+Maven的自动化构建的方法
-
ETL调度系统及常见工具对比:azkaban、oozie、taskctl 数据抓取ETL调度大数据自动化运维kittle
-
使用python3和flask构建RESTful API(接口测试服务与mockserver工具)
-
C#Make自动化构建-简介 博客分类: C#
-
从零开始构建MSBuild C#项目文件 博客分类: C# Msbuild自动化构建