http://www.cnblogs.com/2050/p/4198792.html   这篇文章很全面的讲解了gulpjs的使用

https://www.jianshu.com/p/9723ca2a2afd   gulp入门

http://blog.csdn.net/beverley__/article/details/55213235   gulp自动更新的配置项、打包上线

https://www.cnblogs.com/2050/p/4198792.html#part4   gulp的使用,很详细

http://www.infoq.com/cn/news/2014/02/gulp   gulp的目标是取代grunt

gulp是什么?

gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效

根据gulp的文档,它努力实现的主要特性是:

  • 易于使用:采用代码优于配置策略,gulp让简单的事情继续简单,复杂的任务变得可管理。
  • 高效:通过利用node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
  • 高质量:gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
  • 易于学习:通过把API降到最少,你能在很短的时间内学会gulp。构建工作就像你设想的一样:是一系列流管道。

gulp能做什么

  1. 开发环境下,想要能够按模块组织代码,监听实时变化
  2. css/js预编译,postcss等方案,浏览器前缀自动补全等
  3. 条件输出不同的网页,比如app页面和mobile页面
  4. 线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担
  5. 等等...

gulp到底用来干什么呢?

  1. 编译 sass
  2. 合并优化压缩 css
  3. 校验压缩 js
  4. 优化图片
  5. 添加文件指纹(md5)
  6. 组件化头部底部(include html)
  7. 实时自动刷新…
  8. ......
  9. 压缩静态资源
  10. 变更静态资源
  11. 给静态资源添加 md5
  12. 修改预处理样式后自动编译(SASS,Less)
  13. 合并雪碧图
  14. 自动刷新浏览器
  15. ......
  16. Sass编译
  17. Css Js 图片压缩
  18. Css Js 合并
  19. Css Js 内联
  20. Html的include功能
  21. Autoprefixer
  22. 自动刷新
  23. 去缓存
  24. Handlebars模板文件的预编译
  25. 雪碧图
  26. ESLint
  27. rem移动端适配方案

package.json文件:直接将package.json粘贴到项目根目录,然后cnpm install就会一次向安装相关npm包

{
"name": "gulp",
"version": "1.0.0",
"dependencies": {
"browser-sync": "^2.22.0",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cache": "^1.0.1",
"gulp-changed": "^3.1.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-ejs": "^3.1.0",
"gulp-htmlmin": "^4.0.0",
"gulp-imagemin": "^4.0.0",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.4.0",
"gulp-md5-plus": "^1.0.3",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^3.0.0",
"imagemin-pngquant": "^5.0.1",
"jshint": "^2.9.5",
"minifycss": "^1.0.1"
},
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

gulpfile.js配置文件:

var gulp = require('gulp');

//引入组件
var minhtml = require('gulp-htmlmin'), //html压缩
ejs = require('gulp-ejs'), //ejs模板
less = require('gulp-less'), //less转换CSS
minifycss = require('gulp-minify-css'), //CSS压缩
cleanCSS = require('gulp-clean-css'), //压缩CSS为一行;
autoprefixer = require('gulp-autoprefixer'), //根据设置浏览器版本自动处理浏览器前缀
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
jshint = require('gulp-jshint'), //js代码规范性检查
uglify = require('gulp-uglify'), //js代码压缩
imagemin = require('gulp-imagemin'), //图片压缩
pngquant = require('imagemin-pngquant'), // 深度压缩
clean = require('gulp-clean'), //清空文件夹
cache = require('gulp-cache'), //只压缩修改的图片
connect = require('gulp-connect'), //使用connect启动一个Web服务器
changed = require('gulp-changed'), //检查改变状态
del = require('del'),
browserSync = require("browser-sync").create(), //浏览器实时刷新
md5 = require('gulp-md5-plus'); //发版本的时候为了避免浏览器读取了旧的缓存文件,需要为其添加md5戳 gulp.task('ejs', function() {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}; gulp.src('src/**.ejs')
.pipe(ejs({},{},{ext: '.html'})) //以HTML文件输出
.pipe(ejs())
.pipe(gulp.dest('dist'))
.pipe(minhtml(options))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({stream:true}));
}); /*gulp.task('html',function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
gulp.src('src/*.html')
.pipe(changed('dist', {hasChanged: changed.compareSha1Digest}))
.pipe(minhtml(options))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({stream:true}));
});*/ gulp.task('js',function (done) {
gulp.src('src/js/*.js')
.pipe(changed('dist/js', {hasChanged: changed.compareSha1Digest}))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix:'.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({stream:true}))
.on('end', done);
}); /*gulp.task('css', function(argument) {
gulp.src('src/css/*.less')
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认:true
}))
.pipe(less())
.pipe(concat('merge.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css'));
});*/ //实时编译less
gulp.task('css', function (done) {
gulp.src(['./src/css/*.less']) //多个文件以数组形式传入
.pipe(changed('dist/css', {hasChanged: changed.compareSha1Digest}))
.pipe(less())//编译less文件
.pipe(concat('main.css'))//合并之后生成main.css
.pipe(cleanCSS())//压缩新生成的css
.pipe(gulp.dest('dist/css'))//将会在css下生成main.css
.pipe(browserSync.reload({stream:true}))
.on('end', done);
}); // 压缩图片
gulp.task('img', function (done) {
gulp.src('./src/img/*.*')
.pipe(changed('dist/img', {hasChanged: changed.compareSha1Digest}))
.pipe(imagemin({
progressive: true,// 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox属性
use: [pngquant()] // 使用pngquant插件进行深度压缩
}))
.pipe(gulp.dest('dist/img'))
.pipe(browserSync.reload({stream:true}))
.on('end', done);
}); gulp.task('clear',function () {
gulp.src('dist/*',{read:false})
.pipe(clean());
}); /*gulp.task('connect', function() {
connect.server({
//host: '192.168.1.172', //地址,可不写,不写的话,默认localhost
port: 3000, //端口号,可不写,默认8000
root: './', //当前项目主目录
livereload: true //自动刷新
});
});*/ //删除dist下的所有文件
gulp.task('delete',function(cb){
return del(['dist/*','!dist/img'],cb);
}) //启动热更新
gulp.task('serve', ['delete'], function() {
gulp.start('ejs','js','css','html');
browserSync.init({
port: 2017,
server: {
baseDir: ['dist']
}
});
gulp.watch('src/js/*.js', ['js']); //监控文件变化,自动更新
gulp.watch('src/css/*.less', ['css']);
gulp.watch('src/*.html', ['html']);
gulp.watch('src/img/*.*', ['img']);
}); gulp.task('build',['ejs','css','html','js','img']); gulp.task('default',['serve']);

index.ejs模板文件:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<%-include include/header %>
<p>hello gulp!</p>
<%-include include/footer %>
<script src="js/merge.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

项目的目录结构:

----------------------------------------华丽的分割线--------------------------------------

gulp教程之gulp-imagemin

http://www.ydcss.com/archives/26   讲的很详细!

var gulp = require('gulp'),
imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(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/img'));
});

----------------------------------------华丽的分割线--------------------------------------

在Gulp中使用BrowserSync

http://zlwis.me/2016/02/24/%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/   讲的很详细!

BrowserSync可以同时同步刷新多个浏览器,更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。

----------------------------------------华丽的分割线--------------------------------------

Gulp学习指南之CSS合并、压缩与MD5命名及路径替换

https://segmentfault.com/a/1190000002932998  好文!

{
"name": "gulp2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-minify-css": "^1.2.4",
"gulp-rev": "^8.1.1",
"gulp-rev-collector": "^1.2.3"
}
}
var gulp = require('gulp');
var concat = require('gulp-concat'); //- 多个文件合并为一个;
var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行;
var rev = require('gulp-rev'); //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector'); //- 路径替换 gulp.task('concat', function() { //- 创建一个名为 concat 的 task
gulp.src(['./css/reset.css', './css/index.css']) //- 需要处理的css文件,放到一个字符串数组里
.pipe(concat('wap.min.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('./css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内
}); gulp.task('rev', function() {
gulp.src(['./rev/*.json', './*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录
}); gulp.task('default', ['concat', 'rev']);

实现了md5加密以及引入动态加密文件!

HTML 代码复用

https://segmentfault.com/a/1190000003043326

gulpjs的更多相关文章

  1. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  2. 前端构建工具gulpjs

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  3. [转载]前端构建工具gulpjs的使用介绍及技巧

    转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  4. gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  5. 前端构建工具gulpjs的使用介绍及技巧(一)

    原文链接:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  6. JS 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  7. [转]前端构建工具gulpjs的使用介绍及技巧

    本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  8. 前端构建工具gulpjs的使用介绍及技巧 (转)

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

  9. 前端构建工具gulpjs的使用介绍及技巧(转)

    http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学 ...

随机推荐

  1. 在ASP.NET Core中,静态类如何读取配置文件

    这是今天下午一个同事问我的问题,如何在静态类中读取json配置文件.我当时并没有告诉他如何如何去做,办法肯定是有,但是这种编程思维确实得改改了.静态类.静态方法不是面向对象编程的最佳实践..NET C ...

  2. Winform DataGridView控件在业务逻辑上的简单使用

    需要对文字列表进行处理,然后用到DataGridView控件来处理,记录一下.效果如下: 主要是想通过禁用和取消单元格选择来使图标单元格呈现出鼠标点击的效果.因为有个单元格选择的问题困扰着我. 是这样 ...

  3. 企业项目开发--cookie(2)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 2.1.3.CookieUtil:(cookie的基本操作:增删查,注意没有改)  1 package co ...

  4. linux上安装redis4.0.9

    redis安装从3.0的版本到现在4.0的版本,现在装一个4.0的版本供大家学习使用. 先yum安装gcc yum -y install gcc 已加载插件:fastestmirror, langpa ...

  5. python packaging

    python packaging 一.困惑 作为一个 Python 初学者,我在包管理上感到相当疑惑(嗯,是困惑).主要表现在下面几个方面: 这几个包管理工具有什么不同? * distutils * ...

  6. HDFS概要

    --HDFS-- Hadoop Distributed File System HDFS一个分布式,高容错,可线性扩展的文件系统 简介: Hadoop分布式文件系统(HDFS)是一种分布式文件系统,设 ...

  7. mongodb副本集升级步骤

    1. 先从Secondary开始升级,选择一个不繁忙节点在业务峰值低情况下升级2. 把Secondary设置为隐藏节点,停库,二进制升级重起3. 使用rs.status()查看,等待节点状态为Seco ...

  8. POJ 2719

    #include<iostream> #include<stdio.h> using namespace std; ]; int _pow(int m,int n); int ...

  9. 解决白屏(vue) - webpace es6转es5

    1.npm安装 npm install babel-polyfillnpm install es6-promise package.json中会出现 "babel-polyfill" ...

  10. VM虚拟机-Ubuntu server- 桥接模式网络配置

    问题描述: 在Ubuntu虚拟机安装完毕之后,网络连接采用桥接模式,对虚拟机的eth0网卡进行静态IP设置,参数配置没有问题,但网络一直没有连接成功:即:无法实现本地主机连通虚拟机(ping不通该虚拟 ...