Gulp压缩前端CS,JS,图片文件
Gulp 基于Node.js的前端构建工具,Gulp有许多插件(这里是插件),使用Gulp可以实现前端代码的编译(sass、less)、压缩、图片的压缩等,当然主要是前端工程化,不过我目前只是需要压缩文件就,至于Grunt,相比于Gulp太慢了,Gulp API;
假如有个本地目录,如下图:
环境:
Windows,安装Node https://nodejs.org/en/
安装Gulp:
1,全局安装,执行:npm install gulp -g
2,本地目录安装,cmd 到你的项目根目录,执行: npm install gulp --save-dev
安装插件:
- 自动添加css前缀(gulp-autoprefixer)
- 压缩css(gulp-minify-css)
- js代码校验(gulp-jshint)
- 合并js文件(gulp-concat)
- 压缩js代码(gulp-uglify)
- 压缩图片(gulp-imagemin)
- 自动刷新页面(gulp-livereload)
- 图片缓存,只有图片替换了才压缩(gulp-cache)
- 更改提醒(gulp-notify)
- 清除文件(del)
执行:npm install gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
加载插件:
在根目录创建 gulpfile.js
// 引入 gulp及组件
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'), //压缩css
jshint = require('gulp-jshint'), //js代码校验
uglify = require('gulp-uglify'), //压缩JS
imagemin = require('gulp-imagemin'), //压缩图片
rename = require('gulp-rename'), //合并js文件
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
建立任务:
// Styles
gulp.task('styles', function() {
return gulp.src('src/styles/*.css')
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
}); // Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
}); // Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
}); // Clean 任务执行前,先清除之前生成的文件
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
}); // Default task 设置默认任务
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
监听文件:
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.css', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed); });
然后在 cdm执行任务就可以了,例如:压缩css执行 [ gulp styles ],等待执行完成,你就可以在dist目录下找到压缩好了的文件,如下图
windows 下删除 node_modules 文件夹会提示源路径太长无法删除什么的,找到个方法
在gulpDemo 下新建个空文件夹,随便命名:r
然后cmd 进入gulpDemo,输入命令: Robocopy /MIR r node_modules
等待命令执行完,时间可能有点长,然后删除空文件夹即可。
demo的源码来了:https://github.com/jreey/LearningDemo/tree/master/gulpDemo
Gulp压缩前端CS,JS,图片文件的更多相关文章
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- gulp压缩css和js
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下.一. ...
- 前端使用js读取文件
最近同时问我js能不能读取本地文件: 想起以前看到js读取本地文件的文章,然后自己写了个demo. ps:这有点想Java的IO流,但是又有差别. 首先我们定义一个input标签type=" ...
- JAVA中解决Filter过滤掉css,js,图片文件等问题
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOE ...
- 转:JAVA中解决Filter过滤掉css,js,图片文件等问题
原文链接:https://www.cnblogs.com/ermeng/p/6440966.html public void doFilter(ServletRequest request, Serv ...
- Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题
问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...
- nginx开启gzip压缩前端css,js
利用nginx实现前后端分离, nginx配置文件,nginx.conf配置采用gzip压缩: 在server中添加: gzip on; #开启gzip gzip_min_length 1k; #低于 ...
- C# 将前端传来的图片文件分别以大图和缩略图保存
HttpPostedFile pic_upload = Request.Files["file"]; Bitmap bitmap = (Bitmap)System.Drawing. ...
- 利用 Gulp 处理前端工作流程
最近做项目,因为每次做完后都要手动压缩CSS.JS 等文件,压缩后另存为 *.min.xxx. Less 还要手动输入命令进行编译,调整页面也经常要手动刷新页面看效果,很麻烦,就尝试用 gulp 去处 ...
随机推荐
- Spark操作HBase报:org.apache.hadoop.hbase.client.RetriesExhaustedWithDetailsException异常解决方案
一.异常信息 19/03/21 15:01:52 WARN scheduler.TaskSetManager: Lost task 4.0 in stage 21.0 (TID 14640, hnte ...
- mssql sqlserver 使用sql脚本获取群组后,按时间排序(asc)第一条数据的方法分享
摘要: 下文讲述使用sql脚本,获取群组后记录的第一条数据业务场景说明: 学校教务处要求统计: 每次作业,最早提交的学生名单下文通过举例的方式,记录此次脚本编写方法,方便以后备查,如下所示: 实现思路 ...
- JQuery实现全选、全不选和反选功能
看重点就行了,最后面给一个网页完整的代码 代码实例: function selectStu() { $.ajax("StuList",{ type:"post" ...
- iOS application/json上传文件等
在和sever后台交互的过程中.有时候.他们需要我们iOS开发者以“application/json”形式上传. NSString *accessUrl = [NSString stringWithF ...
- jdk8新特性表达式1
Jdk8中有好多新的特性,比如引入Lambda,简化代码的书写等等 我们先看一个关于Lambda的使用 /*** 输出list */@Testpublic void test() { String[] ...
- ELK收集tomcat访问日志并存取mysql数据库案例
这个案例中,tomcat产生的日志由filebeat收集,然后存取到redis中,再由logstash进行过滤清洗等操作,最后由elasticsearch存储索引并由kibana进行展示. 1.配置t ...
- adb 的常见问题与处理办法两三
问题1:无法安装手机驱动, 解决方法:安装强大的豌豆荚,通常能都能解决问题 问题2: adb devices 时出现 adb devicesadb server is out of date. ki ...
- MacBook Pro维修过程
上个月买了2016款无touchbar的MacBook Pro,这款的键盘跟15年版本的很不一样. 在用了三周左右,就发现有个键按着不灵活了,像是进了水一样,黏住感觉,必须要大力按才会出来.思来想去, ...
- Cassandra联手Spark 大数据分析将迎来哪些改变?
2014Spark峰会在美国旧金山举行,与会数据库平台供应商DataStax宣布,与Spark供应商Databricks合作,在它的旗舰产 品 DataStax Enterprise 4.5 (DSE ...
- ES5-ES6-ES7_Generator 函数
Generator函数的概述 Generator 函数是 ES6 提供的一种异步编程解决方案 Generator函数指的是一种新的语法结构,是一个遍历器对象生成器,它内部可以封装多个状态,很适合用于异 ...