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入门的更多相关文章

  1. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  2. 前端自动化工具gulp入门基础

    gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握.利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发.本文简单讲一下入门gulp需要掌握的东西. 安装gulp ...

  3. 前端构建工具gulp入门教程(share)

    参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...

  4. 前端构建工具gulp入门

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  5. 前端构建工具gulp入门教程

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  6. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  7. gulp 入门使用

      gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...

  8. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  9. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

随机推荐

  1. Eclipse配置maven环境

    一.什么是maven? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个 ...

  2. Java ASM介绍

    一.什么是ASM 首先看下官方中的说明 ASM a very small and fast Java bytecode manipulation framework. ASM是一个JAVA字节码分析. ...

  3. java实现定时任务

    Java中实现定时任务执行某一业务.具体操作如下: 1.定义初始化任务 2.任务业务操作 3.定义初始化方法 4.在web.xml中注册启动 5.定义具体执行时间

  4. 关键字final整理

    关键字final整理 由于语境(应用环境)不同,final 关键字的含义可能会稍微产生一些差异.但它最一般的意思就是声明"这个东西不能改变".之所以要禁止改变,可能是考虑到两方面的 ...

  5. WebSphere--定制配置

    本节介绍如何启动和使用 WebSphere应用服务器的管理器(一个图形界面)为 Servlet 活动和 WebSphere应用服务器的组件定制基本设置参数.    1.启动 WebSphere应用服务 ...

  6. base64_encode与base64_decode

    base64_encode 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! base64_encode() returns 使用 base64 对 data 进行编码. ...

  7. PHP获取客户端和服务器端IP(转)

    客户端的ip变量: $_SERVER['REMOTE_ADDR'] :客户端IP,也有可能是代理IP $_SERVER['HTTP_CLIENT_IP']:代理端的IP,可能存在,也可能伪造 $_SE ...

  8. 溢出问题:overflow后最后一排文字显示不全

    溢出字体会显示在padding区域(http://www.divcss5.com/css-hack/c680.shtml) section#xinwen li a h3{ border-bottom: ...

  9. Part 3:视图和模板--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  10. zabbix监控windows agent安装配置

    下载Windows的zabbix客户端 下载地址:http://www.zabbix.com/download.php 从官方下载Zabbix Agent后,压缩包里面有2个目录,bin和conf,c ...