前端小白的gulp入门
gulp新手入门
全局安装 cnpm install -g gulp
本地安装 cnpm install gulp -D
如果项目没有package.json,记得npm init
安装插件cnpm install gulp-插件名 -D
细心的科普
//i -->install
//D -->--save-dev 记录package.json文件里
//S -->--save 本地安装
- gulp报低级错误
- 删除node_modules在安装
rm -rf node_modules
cnpm i
先新建一个任务清单
新建gulpfile.js文件
插件
gulp-less
编译LESS文件
gulp-autoprefixer
添加CSS私有前缀
gulp-cssmin
压缩CSS
gulp-rname
重命名
gulp-imagemin
图片压缩
gulp-uglify
压缩Javascript
gulp-concat
合并
gulp-htmlmin
压缩HTML
gulp-rev
添加版本号 //md5文件加密
gulp-rev-collector
内容替换
不上代码怎么行呢?不然还是会摸不到北
//引用本地安装的gulp
var gulp = require("gulp");
var less = require("gulp-less"); //less转化
var cssmin = require("gulp-cssmin"); //压缩css
var imagemin = require("gulp-imagemin"); //压缩图片
var uglify = require("gulp-uglify"); //资源合并
var concat = require("gulp-concat"); //合并
var htmlmin = require("gulp-htmlmin"); //压缩html
var minify = require('html-minifier').minify; //注释清除插件
var postcss=require("gulp-postcss"); //加私有前缀
var autoprefixer=require("gulp-autoprefixer");
var rev = require("gulp-rev"); //添加版本号
var revCollector=require("gulp-rev-collector"); //文本替换
//定义任务
gulp.task("less", function () {
//借助gulp.src来指定less文件位置
gulp.src("./less/*.less")
//借助gulp
.pipe(less())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(rev()) //生成的文件名添加md5 垃圾回收
//通过gulp.dest进行存储
.pipe(gulp.dest("./release/piblic"))
.pipe(rev.manifest()) //记录css改名记录 是这个插件gulp-rev-collector
.pipe(gulp.dest("./release/rev"))
})
//压缩图片 命令 gulp image
gulp.task("image", function () {
gulp.src("./images/*")
.pipe(imagemin())
.pipe(gulp.dest("./imagemin"))
})
//压缩js 命令gulp js
gulp.task("js", function () {
gulp.src("./scripts/*.js")
.pipe(concat("all.js"))//合并的文件记得写名字
.pipe(uglify())
.pipe(gulp.dest("./bbb"))
})
//压缩html 命令 gulp html //注意单词别写错了哟
//这个还是看官方文档吧,很清晰
gulp.task("html", function () {
gulp.src(['./index.html', './views/*.html'],{base:'./'})
//可以写多个文件 {base:"./"}就是./是不动的,相当于忽略掉
.pipe(htmlmin({collapseWhitespace: true, removeComments: true,minifyJS:true}))
//这个看文档哦 minifyJS:true压缩html中的js
.pipe(gulp.dest("./aaa"))
})
// 替换 这个要注意文件的路径哟 其实就是替换html中的css路径,因为
// 当你把css的文件名改的就需要改html的文件路径,是不是有点罗嗦
// 记得要使用哪个插件一定提前下载,不然报错你也会一脸懵逼
gulp.task("rev",function () {
gulp.src(["./release/rev/*.json","./release/*.html"],{base:"./release"})
.pipe(revCollector())
.pipe(gulp.dest("./release"))
})
//html中的js改名替换我还没弄出来
看到官网有3000多个插件,差点吓我一跳,需要多查文挡,多百度哟
前端小白的gulp入门的更多相关文章
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 前端自动化工具gulp入门基础
gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握.利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发.本文简单讲一下入门gulp需要掌握的东西. 安装gulp ...
- 前端构建工具gulp入门教程(share)
参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...
- 前端构建工具gulp入门
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...
- 前端构建工具gulp入门教程
本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...
- Web前端小白入门指迷
前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...
- gulp 入门使用
gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
随机推荐
- Python3 的序列
序列 1.根据列表.元组.字符串的共同点把它们统称为序列(他们都是兄弟呀) 1)都可以通过索引来的到每一个元素 2)默认索引值都是从零开始(Python也支持负数索引) 3)都可以通过分片(切片)的方 ...
- ngRx 官方示例分析 - 3. reducers
上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...
- Hadoop问题:启动hadoop 2.6遇到的datanode启动不了
问题描述:第一次启动输入jps都有,第二次没有datanode 日志如下: 查看日志如下: -- ::, INFO org.mortbay.log: Started HttpServer2$Selec ...
- 007-declare 声明变量的类型
declare [+/-] [选项] 变量名 - 给变量设定类型 + 取消变量的类型 -a 将变量声明为数组型 -i 将变量声明为整形 -x 将变量声明成环境变量 -r 将变量声明为只读变量 -p 显 ...
- 使用SQL 提示优化sql
use index 在查询语句中表名的后面,添加use index来提供希望mysql去参考的索引列表,就可以让mysql不再考虑其他可用的索引 explain select * from renta ...
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录
前面已经提到了mysql主从环境下数据一致性检查:mysql主从同步(3)-percona-toolkit工具(数据一致性监测.延迟监控)使用梳理今天这里再介绍另一种Mysql数据一致性自动检测工具: ...
- JS题目
1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的. 第一:每个特定的域名下最多生成20个cookie 1.IE6或更低版本最 ...
- BSA Network Shell系列-redi命令
redi ## 1 功能概述 redi将输出重定向到一个文件中 ## 2 语法 redi [-?] [-a] filename ## 3 使用示例 1 将输出重定向到隐式路径所在主机的/tmp/hah ...
- nginx配置中root与alias的区别
nginx指定文件路径有两种方式root和alias,这两者的用法区别,使用方法总结了下,方便大家在应用过程中,快速响应.root与alias主要区别在于nginx如何解释location后面的uri ...
- Android webView包装WebAPP
前言 Android webView 兼容体验真的差到了极点!! 前一阵子,老板要讲 WebAPP 放到 Android 和 iOS 里面,而我因为以前做过安卓,所以这方面就由我来打包, 原理是很简单 ...