zoukankan      html  css  js  c++  java
  • 搭建gulp脚手架

      前段时间刚好在开发公司的首页,使用的是gulp工作流,gulp相对于webpack而言,配置简单,也更加直观(很符合直觉),日常开发一些静态页面、html5专题也足够,这里把遇到的坑与实践经验记录一下。

           gulp api 非常简单,由5个方法组成:task run watch src dest,复杂的功能由插件的形式来实现。

      整体的工作流程就是 取出文件 => 各种处理一番 => 输出 
    
      task 创建任务,在命令行下可以输入 gulp test 来执行test的任务。
      run 运行任务
      watch 监听任务
      src 设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss,vender.scss],也可以是正则表达式 /*/ .scss。 
      dest 设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。

      1、全局安装gulp

    $ npm install -g gulp  
    

      2、项目中安装gulp,新建gulpfile.js 配置文件

    $ npm install --save-dev gulp 

      3、使用的gulp插件

      "gulp-autoprefixer": "^5.0.0", -- 自动补全浏览器前缀
      "gulp-file-include": "^2.0.1", -- 提供如后端模板功能
      "gulp-imagemin": "^4.1.0", -- 处理图片
      "gulp-minify-css": "^1.2.4", -- 压缩CSS
      "gulp-uglify": "^3.0.0",  -- 压缩JS
      "imagemin-jpeg-recompress": "^5.1.0"  -- 处理图片 
      "browser-sync": "^2.24.5", --浏览器热刷新

      gulp 配合以上插件基本能够满足日常开发的需要,提供模板、文件刷新、图片压缩、热刷新等功能,唯一不爽的是静态资源更新以后不能自动复制到dist目录,要重启整个进程,勉强能够接受吧。

    const gulp = require('gulp');
    const uglify = require('gulp-uglify');
    const minifyCSS = require('gulp-minify-css');
    const imagemin = require('gulp-imagemin');
    const imageminJpegRecompress = require('imagemin-jpeg-recompress');
    const imageminOptipng = require('imagemin-optipng');
    const fileinclude = require('gulp-file-include');
    const autoprefixer = require('gulp-autoprefixer');
    const browerSync = require('browser-sync').create();
    
    
    const srcScript = './src/js/*.js';
    const dstScript = './dist/js';
    const srcCSS = './src/css/*.css';
    const dstCSS = './dist/css';
    const srcImage = './src/img/*.*';
    const dstImage = './dist/img';
    const srcHtml = './src/*.html';
    const dstHtml = './dist';
    
    
    //处理JS文件:压缩,然后换个名输出;
    
    //命令行使用gulp script启用此任务;
    
    gulp.task('script', function() {
    
      gulp.src(srcScript)
    
          .pipe(uglify())
    
          .pipe(gulp.dest(dstScript));
    
    });
    
    
    //处理CSS文件:压缩,然后换个名输出;
    
    //命令行使用gulp css启用此任务;
    
    gulp.task('css', function() {
    
      gulp.src(srcCSS)
        
          .pipe(autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            }))
          
          .pipe(minifyCSS())
    
          .pipe(gulp.dest(dstCSS));
    
    });
    
    
    //图片压缩任务,支持JPEG、PNG及GIF文件;
    
    //命令行使用gulp jpgmin启用此任务;
    
    gulp.task('imgmin', function() {
    
      var jpgmin = imageminJpegRecompress({
    
              accurate: true,//高精度模式
    
              quality: "high",//图像质量:low, medium, high and veryhigh;
    
              method: "smallfry",//网格优化:mpe, ssim, ms-ssim and smallfry;
    
              min: 70,//最低质量
    
              loops: 0,//循环尝试次数, 默认为6;
    
              progressive: false,//基线优化
    
              subsample: "default"//子采样:default, disable;
    
          }),
    
          pngmin = imageminOptipng({
    
              optimizationLevel: 4
    
          });
    
      gulp.src(srcImage)
    
          .pipe(imagemin({
    
              use: [jpgmin, pngmin]
    
          }))
    
          .pipe(gulp.dest(dstImage));
    
    });
    
    
    //使用gulp file-include 处理公用页面(头部、底部)
    
    //命令行使用gulp html启用此任务;
    
    gulp.task('html', function() {
    
      gulp.src(srcHtml)
          .pipe(fileinclude({
              prefix: '@@',
              basepath: './src/tpl',
              indent: true
          }))
          .pipe(gulp.dest(dstHtml));
    
    });
    
    
    //服务器任务:以dist文件夹为基础,启动服务器;
    
    //命令行使用gulp server启用此任务;
    
    gulp.task('server', function() {
    
      browerSync.init({
    
          server: "./dist"
    
      });
    
    });
    
    
    //监控改动并自动刷新任务;
    
    //命令行使用gulp auto启动;
    
    gulp.task('auto', function() {
    
      gulp.watch(srcScript, ['script']);
    
      gulp.watch(srcCSS, ['css']);
    
      gulp.watch(srcImage, ['imgmin']);
    
      gulp.watch(srcHtml, ['html']);
    
      gulp.watch('./dist/**/*.*').on('change', browerSync.reload);
    
    });
    
    
    //gulp默认任务(集体走一遍,然后开监控);
    gulp.task('default', ['script', 'css', 'imgmin', 'html', 'server', 'auto']);
    View Code
  • 相关阅读:
    【Lintcode】112.Remove Duplicates from Sorted List
    【Lintcode】087.Remove Node in Binary Search Tree
    【Lintcode】011.Search Range in Binary Search Tree
    【Lintcode】095.Validate Binary Search Tree
    【Lintcode】069.Binary Tree Level Order Traversal
    【Lintcode】088.Lowest Common Ancestor
    【Lintcode】094.Binary Tree Maximum Path Sum
    【算法总结】二叉树
    库(静态库和动态库)
    从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/jydeng/p/9282269.html
Copyright © 2011-2022 走看看