欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

gulp 自动化构建工具

程序员文章站 2024-02-25 11:45:52
...

一、gulp 和webpack 的区别
前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack。
grunt 和gulp 是一个优化前端流程的工具,而webpack是一个预编译模块的方案同时也是一个打包工具。具体关系如下图:
gulp 自动化构建工具
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/