Gulp代码

gulpfile.js:

var gulp = require(‘gulp‘),

minifycss = require(‘gulp-minify-css‘),

uglify = require(‘gulp-uglify‘);

var assetRev = require(‘gulp-asset-rev‘);

gulp.task(‘rev‘,[‘revCss‘,‘revJs‘,‘revImg‘],function() {

gulp.src("./*.html")

.pipe(assetRev())

.pipe(gulp.dest(‘./dest‘));

});

gulp.task(‘revCss‘,function () {

return gulp.src(‘./css/*.css‘)

.pipe(minifycss())

.pipe(assetRev())

.pipe(gulp.dest(‘./dest/css/‘))

});

gulp.task(‘revJs‘,function () {

return gulp.src(‘./js/*.js‘)

.pipe(uglify())

.pipe(assetRev())

.pipe(gulp.dest(‘./dest/js/‘))

});

gulp.task(‘revImg‘,function () {

return gulp.src(‘./img/*‘)

//.pipe(assetRev())

.pipe(gulp.dest(‘./dest/img/‘))

});

gulp.task(‘default‘,[‘rev‘]);

/**

*

* 只添加版本号不压缩

*

*/

/*var gulp = require(‘gulp‘);

var assetRev = require(‘gulp-asset-rev‘);

gulp.task(‘rev‘,[‘revCss‘,‘revJs‘,‘revImg‘],function() {

gulp.src("./*.html")

.pipe(assetRev())

.pipe(gulp.dest(‘./dest‘));

});

gulp.task(‘revCss‘,function () {

return gulp.src(‘./css/*.css‘)

.pipe(assetRev())

.pipe(gulp.dest(‘./dest/css/‘))

});

gulp.task(‘revJs‘,function () {

return gulp.src(‘./js/*.js‘)

.pipe(assetRev())

.pipe(gulp.dest(‘./dest/js/‘))

});

gulp.task(‘revImg‘,function () {

return gulp.src(‘./img/*‘)

//.pipe(assetRev())

.pipe(gulp.dest(‘./dest/img/‘))

});

gulp.task(‘default‘,[‘rev‘]);*/

时间: 2024-08-04 11:08:55

Gulp代码的相关文章

nodejs、gulp调试工具node-inspector使用

俗话说欲善其功,必先利其器. 作为目前新型的Web Server开发栈倍受开发者关注的Nodejs来说,调试技术是学习开发的基石,所以对于开始学习Nodejs童鞋来说,Nodejs的调试工具使用是必不可少的,总的来说Nodejs的调试方法主要分类三类: 1.基于Nodejs内建的调试器 2.基于V8调试插件 3.基于Chrome浏览器的调试器. 至于使用哪一个作为Nodejs的调试工具,就要看你的选择了,作为一个用惯了chrome调试前端工程的前端开发人员来说,我还是倾向于基于Chrome浏览器

gulp 入门---使用gulp压缩css

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 二.创建 gulpfile.js 文件编写代码 在对应目录创建 gulpfile.js 文件并

续Gulp使用入门三步压缩图片

gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin 安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络) npm

gulp学习整理

使用gulp: 1.解决Javascript和CSS的版本问题. 2.解决Javascript和CSS的依赖,在加载顺序上的问题,构建工具可以大大的减少此类问题.3.在性能优化上,当项目有大量的JS文件时,请求的文件越多耗时越大,这样无疑拖慢了网页的速度,而gulp能够通过:文件合并,文件压缩进行解决.4.在效率的提升上gulp能够做到: vendor前缀:在CSS3使用越来越多的时候,我们都知道一些CSS的特性,不同的浏览器CSS有不同的前缀,如果我们手工添加将会很繁琐,而如果使用构建工具,很

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切

使用 gulp 构建一个项目

本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码. 若你不了解npm 请务必阅读 npm模块管理器

使用 gulp 压缩图片

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin

Gulp的常见用法

Gulp 用法 Gulp 的安装部署 首先安装 gulp 全局安装gulp 命令行工具 npm i -g gulp-cli 全局安装 npm i -g gulp 在项目的根目录创建一个 gulpfile.js 的文件 Gulp 中的方法 gulp.src():获取任务要处理的文件 gulp.dest():输出文件 gulp.task(): 建立 gulp任务 参数一:任务的名称 参数二:任务的回掉函数 gulp.watch():监控文件发生的变化 const gulp = require('gu

前端脚本构建方案

这次主要是说明如何为新模块配置,以实现打包压缩. 文件目录 gulp目录存放构建配置文件. build目录存放构建好的css和js文件. 根目录下有gulpfile.js和package.json文件 js目录存放源代码文件 安装 在本地安装Node,然后安装gulp npm install gulp -g 在项目根目录下执行 npm install 安装所有的构建过程依赖的包,安装好以后,配置模块的构建文件. 配置 模块配置文件格式如下: module.exports = { css: [ '