码迷,mamicode.com
首页 > 其他好文 > 详细

搭建gulp脚手架

时间:2018-07-09 11:11:54      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:使用   res   pack   设置   min   lap   spl   ash   webp   

  前段时间刚好在开发公司的首页,使用的是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

搭建gulp脚手架

标签:使用   res   pack   设置   min   lap   spl   ash   webp   

原文地址:https://www.cnblogs.com/jydeng/p/9282269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!