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

搭建gulp脚手架的更多相关文章

  1. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

  2. 0.react学习笔记-环境搭建与脚手架

    0.环境搭建 笔者使用的是deepin/mac两种系统,因为两个电脑经常切换用.环境搭建没什么区别. 0.1 node安装 按照node官网叙述安装 # Using Debian, as root c ...

  3. 搭建vue脚手架

    1.Node.js安装 1.1下载安装 在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可 1.2测试安装是否成功 Windows+R打开cmd窗口,输入node -v回车出现版本号 ...

  4. Vue2.0 搭建Vue脚手架(vue-cli)

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...

  5. 搭建vue脚手架---vue-cli

    vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建.打包.维护管理等都非常方便快捷.我们在开发项目时尤其需要这样一个快速构建项目的工具. 以下 ...

  6. Vue入坑教程(一)——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

  7. 从零搭建 vue-cli 脚手架

    前言: 用了几次 vue-cli 做 vue 项目,感觉没什么大问题,虽然也没有用 vue-router 和 vuex .但是心里一直有个梗,就是最初的目录生成和配置文件,一直没动过,也不知道具体原理 ...

  8. 怎么搭建vue-cli脚手架

    我们在使用vue搭建项目的时候,经常要使用到vue-cli. 一.安装node.js 去node官网下载并安装node,一直next就行. 等待安装完毕,输入node-v,如果输出版本号,那说明已经成 ...

  9. vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)

    Vue 提供了一个官方的cli,为单页面应用 (SPA) 快速搭建繁杂的脚手架. 一.vue cli脚手架 脚手架通过webpack搭建开发环境 使用ES6语法 打包压缩js为一个文件 项目文件在环境 ...

随机推荐

  1. [Socket]Socket文件传输

    1.Server import java.io.DataInputStream; import java.io.FileOutputStream; import java.io.IOException ...

  2. CentOS6.9下升级默认的OpenSSH操作记录(升级到OpenSSH_7.6p1)

    近期对IDC机房服务器做了一次安全漏洞扫描,漏扫结果显示服务器的OpenSSH版本太低(CentOS6默认是OpenSSH_5.3p1),存在漏洞隐患,安全部门建议升级到OpenSSH_7.6p1.升 ...

  3. CentOS 6下gcc升级的操作记录(由默认的4.4.7升级到6.4.0版本)

    机房一台centos6.9机器部署了jenkins发布系统,开发人员在用node编译js,发现依赖的gcc版本低了,故需要将gcc升级到高版本(至少5.0版本以上),这里选择升级到6.4.0版本,下面 ...

  4. haproxy反向代理环境部署(http和https代理)

    操作背景:前方有一台haproxy代理机器(115.100.120.57/192.168.1.7),后方两台realserver机器(192.168.1.150.192.168.1.151,没有公网i ...

  5. VIM编辑器常用命令(转)

    转自:https://www.cnblogs.com/Nice-Boy/p/6124177.html

  6. springboot整合druid连接池、mybatis实现多数据源动态切换

    demo环境: JDK 1.8 ,Spring boot 1.5.14 一 整合durid 1.添加druid连接池maven依赖 <dependency> <groupId> ...

  7. HanderBar

    对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构 ...

  8. 第二个spring

    由于第一个spring已经完成,我们现在进去第二个spring! 陈志棚:成绩的统筹 李天麟:界面音乐 徐侃:代码算法   plan好布局,分配任务,控制时间!

  9. Visual Studio 2017 社区版的安装与组件修改(C++)

    0. 环境描述 需求:用VS2017做C++简易开发. 操作系统:Windows 8.1. 1. 下载 MSDN下载VS2017社区版. https://msdn.itellyou.cn/ 下载后: ...

  10. Golang的格式化输出fmt.Printf

    本文来源:Go by example. Golang的格式化输出 和 C语言的标准输出基本一样,但是增加了一些针对Golang语言的特有数据结构的格式化输出方式. 一下就是实例: package ma ...