安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gulp.spritesmith": "^6.5.1" gulpfile.js的配置 const gulp = require("gulp") // 本实例为完成精灵图的合并 const spritesmith = require("gulp.sprit…

关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将HTML 文件中(或者templates/views)中没有优化的script 和stylesheets 替换为优化过的版本 gulp-usemin根据预先在html文件(或者其它模板/视图中的文件)中声明好的blocks来执行一系列任务(例如合并文件并重全名.排除一些只在开发过程中引入的脚本以及将c…

之前写过一篇gulp的使用文章一篇迟到的gulp文章,代码合并压缩,less编译 最近有在用gulp,使用到一个gulp-nunjucks-render插件,感觉挺方便的 gulp-nunjucks-render 用来渲染Nunjucks templates 安装 npm install --save-dev gulp-nunjucks-render 使用 var env = process.env.NODE_ENV; var ver = require('./package.json').ve…

http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm install gulp安装gulp. 在安装npm install gulp-connect.自动刷新,主要是通过这个插件来完成的. 最后配置gulpfile.js,内容如下: var gulp = require('gulp'), connect = require('gulp-connect'); /…

简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器,她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,她…

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么安装的话 ,自行度娘.安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本…

前端现在有很多的自动打包工具,各有优缺点,而gulp作为其中的一员,也有着很受人们的青睐,简单粗暴,然而gulp本身并没有提供很多的API,真正的一些工作则是靠着插件完成的,本文简单介绍一些常用的gulp插件及其使用. //文件包含 //学习链接 https://www.npmjs.com/package/gulp-file-include var fileInclude = require('gulp-file-include'); //示例: var fileinclude = requir…

gulp-uglify:压缩js大小,只支持es5 安装: cnpm: cnpm i gulp-uglify -D yarn: yarn add gulp-uglify -D 使用: 代码实现1:压缩js文件夹下的index.js文件输出到dist文件夹下面(注意要压缩的js文件中此处只能使用es5) var gulp = require('gulp'); var uglify = require('gulp-uglify'); gulp.task("uglify",function(…

功能描述生成sourcemap文件(什么是sourcemap?请参考,简单讲就是文件压缩后不利于查看与调试,但是有了sourcemap,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码) 插件安装$ cnpm install gulp-sourcemaps --save-dev1使用方法例1:生成JS文件的sourcemap var gulp = require('gulp'), uglify = require('gulp-uglify'), concat = require('gu…

自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里打滚了两年的文艺小码农来说,也有自己的一些体会,今天就来分享一下自己基于Gulp编写的一个比较丑陋的前端开发环境,本人技术有限,有问题和意见请私下聊,勿喷: 首先安装Node.js,至于怎么安装的话 ,自行度娘.安装完成之后在命令行里面输入下面两个命令,如果输出了版本号的话(这个是我自己电脑上的版本…

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gul…

原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具grunt相比,有什么优势呢? 易于使用,代码优于配置 高效,不会产生过多的中间文件,减少I/O压力 易于学习,API非常少,你能在很短的事件内学会gulp 那些常用的gulp插件 No.1.run-sequence Links: https://www.npmjs.com/package/run-se…

gulp-ruby-sass是gulp的一个插件,主要是用来实现sass编译,livereload插件主要是实现文件保存时浏览器自动刷新,避免了手动f5的频繁的操作 准备工作:chrome浏览器安装livereload插件,没有安装的可以百度搜索或者FQ下载, 1)首先安装node,全局安装gulp,如果不了解gulp的请先移步到这里. 2)打开命令行切换到工程目录下,安装gulp(cnpm install gulp --save-dev).gulp-ruby-sass(cnpm install…

gulp的autoprefixer插件可以根据我们的设置帮助我们自动补全浏览器的前缀(如:-moz.-ms.-webkit.-o) 1)首先安装gulp,不知道怎么安装请看这里 2)安装autoprefixer插件 3)主要要在gulpfile.js文件引入autoprefixer,然后在添加autopre任务.完整代码如下 // 载入外挂 var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'); gulp.…

源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp插件,用于WEB前端构建 安装 进入您做为构建工具用的目录 1.首先安装gulp $ npm install -g gulp $ npm install --save-dev gulp 2.安装其它依赖[q/gulp-jshint]. $ npm install q $ npm install gu…

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through…

推荐一个很好文: https://github.com/lin-xin/blog/issues/2 匹配符 *.**.!.{} gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件 gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的所有js文件 gulp.src('./js/**/{omui…

功能描述 gulp默认使用最大并发数执行任务,也就是说所有的任务几乎都是同时执行,而不会等待其它任务.但很多时候,任务是需要有先后次序的,比如要先清理目标目录,然后再执行打包. run-sequence 的作用就是控制多个任务进行顺序执行或者并行执行 gulp-run-sequence 也是实现相同功能,但已经被标记为deprecated 插件安装 $ cnpm install run-sequence --save-dev 1 使用方法 执行前端代码自动构建,一般会分为以下几个步骤 1. 清理…

注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置gulp及其插件. 前提:已安装nodejs——npm  (备注教程  “物理安装”) 第一步:建了一个Gulp文件夹,保存插件用于使用第二步:进入nodejs环境下安装cnpm淘宝镜像文件(若npm install 时报错,形如 npm ERR!Windows_NT XXX ,则将之前存在的.np…

初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查看API文档,一看便懂. 此处贴上地址https://www.gulpjs.com.cn/docs/api/ gulp-html-import API文档: https://www.npmjs.com/package/gulp-html-import 简介: 引入html内容到另一个html文件的指…

目录: 插件的安装卸载 插件使用的基本流程 拆分任务 监听 默认任务 一.插件的安装卸载 安装: npm install gulp-less --save-dev 卸载 npm uninstall gulp-less --save-dev 二.插件使用的基本流程 1.创建gulpfile.js 2.创建package.json 3.安装gulp到项目 4.安装插件到项目 5.使用插件 6.运行看效果 实例: Gulp插件autoprefixer的使用 Gulp插件less的使用 三.拆分任务 /…

1.创建:gulpfile.js var gulp = require('gulp'), less = require('gulp-less'); gulp.task('default', function () { gulp.src('less/index.less') .pipe(less()) .pipe(gulp.dest('dist')); }); 2.创建package.json npm init 3.安装gulp到项目 npm install --save-dev gulp 4.安…

1.创建:gulpfile.js //引入插件 var gulp = require('gulp'); var autoprefixer = require('gulp-autoprefixer'); //默认执行任务 gulp.task('default', function () { //找到src目录下app.css,为其补全浏览器兼容的css return gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 ve…

//引入gulp组件 var gulp=require('gulp'); //创建任务 gulp.task('hello',function(){ console.log('hello'); }); //创建另一个任务 gulp.task('world',function(){ console.log('world'); }); //默认执行两个任务 //一个gulpfile.js中只能有一个default //三种写法,3个参数 /** * [description] default默认 的写…

1.安装和使用 安装node环境:官网:https://nodejs.org: 命令行输入 npm i gulp -g ,gulp-v查看安装是否成功: 创建项目目录: 进入目录,并在目录中按住shift+鼠标右键,进入命令行工具执行npm init -y 初始化项目,此时会自动生成package.json文件: dist用于存放gulp任务执行后代码,src为工作源代码: 在当前项目局部安装gulp,npm i gulp -dev. -dev的意思是安装成开发依赖,也就是说这个包只有开发环境需…

最近研究了一下gulp构建工具,发现使用起来比grunt顺手一些.(个人感受),以下是grunt和gulp构建方式和原理: grunt 基于文件方式构建,会把文件先写到临时目录下,然后进行读文件,修改文件,写文件,,,读文件,修改文件,写文件..... 需要进行大量IO操作. gulp 基于流(streaming)的方式构建,首先读取文件,编译压缩文件(流的方式),最终将结果生成到配置的文件目录下. 安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局…

通过一条命令用Npm安装gulp-htmlmin: npm install gulp-htmlmin --save-dev 安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门压缩html,并对html进行一系列的处理: var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); gulp.task('html',function(){ var options = { collapseWhitesp…

原文:http://www.mamicode.com/info-detail-517085.html No.1.run-sequence   作用:让gulp任务,可以相互独立,解除任务间的依赖,增强task复用 Links: https://www.npmjs.com/package/run-sequence  推荐指数:★★★★★ No.2.browser-sync  作用:静态文件服务器,同时也支持浏览器自动刷新 Links: http://www.browsersync.io/   推荐…

gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js.而且升级npm到最新版本号. 安装nodeJS 基本參考传送门戳这里:安装nodeJs.安装nodeJs2.nodeJs下express的安装到执行 1.    从nodejs.org下载最新的nodejs安装包.并安装. 2.    进入nodejs的安装路径下: 天真的以为这样就能够了. wat…

gulpfile.js var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input chec…