• 自动化构建工具—gulp的用法简单总结


      把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充

      cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保存到git仓库时,只需保存package.json即可
     
      用到的gulp模块有:gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open
        注:安装node模块是可批量安装的  cnpm i --save-dev gulp-clean gulp-concat....
     
      gulp-plumber:当编译css or js时发生错误,它不会立即中断线程,而只是抛出错误

      gulp有两个优点:

        1、基于流,效率非常高  简言之,把产生的中间文件放在内存中进行处理,直到最后一步才生成文件,操作文件

        2、任务化,编写成一个个小任务 然后合并执行任务 逻辑清晰 可读性好

      gulp有两个功能很重要——压缩、合并,合并之后减少Http请求,压缩后减少带宽

      常用的api(函数):src、dest、watch、task、pipe  

        src:     读取文件、文件夹
        dest:     生成文件、写文件
        watch:监控文件
        task:定制任务
        pipe:用流的方式处理文件
     
      贴出gulpfile.js的文件编写:
      
    //引入模块
    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')(); //其他的gulp模块就可以直接通过$来引用,而不需再声明变量
    var open = require('open');
     
    //全部变量来定义目录路径
    var app = {
        srcPath:'src/',        //源代码放置的位置
        devPath:'build/',    //整合之后的文件,开发目录
        prdPath:'dist/'        //用于生产、部署
    };
    
    //把bower下载的第三方创建拷贝到生产环境目录
    gulp.task('lib',function(){
        gulp.src('bower_components/**/*.js')      //对bower_..下面的子文件进行深度遍历,读取文件
        .pipe(gulp.dest(app.devPath+'vendor'))    //操作:写文件
        .pipe(gulp.dest(app.prdPath+'vendor'))
        .pipe($.connect.reload())//构建完,刷新浏览器进行实时预览
    
    });
    
    gulp.task('html',function(){
        gulp.src(app.srcPath+'**/*.html')
        .pipe(gulp.dest(app.devPath))
        .pipe(gulp.dest(app.prdPath))
        .pipe($.connect.reload())
    
    });
    
    gulp.task('json',function(){
        gulp.src(app.srcPath+'data/**/*.json')
        .pipe(gulp.dest(app.devPath+'data'))
        .pipe(gulp.dest(app.prdPath+'data'))
        .pipe($.connect.reload())
    
    });
    
    gulp.task('less',function(){
        gulp.src(app.srcPath+'style/index.less')
        .pipe($.plumber()) //修复了pipe处理异常的bug,让任务执行更平滑
        .pipe($.less())
        .pipe(gulp.dest(app.devPath+'css'))
        .pipe($.cssmin())
        .pipe(gulp.dest(app.prdPath+'css'))
        .pipe($.connect.reload())
    
    });
    
    gulp.task('js',function(){
        gulp.src(app.srcPath+'script/**/*.js')
          .pipe($.plumber())
        .pipe($.concat('index.js'))
        .pipe(gulp.dest(app.devPath+'js'))
        .pipe($.uglify())
        .pipe(gulp.dest(app.prdPath+'js'))
        .pipe($.connect.reload())
    
    });
    
    gulp.task('image',function(){
        gulp.src(app.srcPath+'image/**/*')
        .pipe($.plumber())
        .pipe(gulp.dest(app.devPath+'image'))
        .pipe($.imagemin())
        .pipe(gulp.dest(app.prdPath+'image'))
        .pipe($.connect.reload());
    
    });
    
    gulp.task('build',['image','js','less','json','html','lib']);
    
    //每次发布的时候,把之前的目录清除,避免旧的文件对当前项目造成影响
    gulp.task('clean',function(){  //构架任务
        gulp.src([app.devPath, app.prdPath])
        .pipe($.clean());
    
    });
    
    //编写个服务器
    gulp.task('serve',['build'],function(){
        $.connect.server({
            root:[app.devPath],
            livereload:true,    //适用于高级浏览器,自动刷新浏览器,ie就不支持
            port:1234
    
        });
        open('http://localhost:1234');
    
        //自动构建
        gulp.watch('bower_components/**/*',['lib']);
        gulp.watch(app.srcPath+'**/*',['html']);
        gulp.watch(app.srcPath+'data/**/*',['json']);
        gulp.watch(app.srcPath+'style/**/*',['less']);
        gulp.watch(app.srcPath+'script/**/*',['js']);
    });
    
    gulp.task('default',['serve'])
  • 相关阅读:
    linux下文件夹的创建、复制、剪切、重命名、清空和删除命令
    Linux 删除文件夹和创建文件的命令
    linux下拷贝整个目录
    星云大师:这十句话 我受用一生
    dex
    瘋耔java语言笔记
    VCC_VID_VTT等的含义
    一位数码管引脚
    android从应用到驱动之—camera(2)---cameraHAL的实现
    android从应用到驱动之—camera(1)---程序调用流程[转]
  • 原文地址:https://www.cnblogs.com/fengxiaoqing/p/8034728.html
Copyright © 2020-2023  润新知