Gulpfile.js——编译、压缩、合并js和css文件
gulp 一个入门教程:http://www.ydcss.com/
gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile
var gulp = require('gulp');
gulpif = require('gulp-if');
sass = require('gulp-sass');
concat = require('gulp-concat');
rename = require('gulp-rename');
cssmin = require('gulp-cssmin');
uglify = require('gulp-uglify');
clean = require('gulp-clean'); gulp.task('clean',function(){
gulp.src(['dist/css/*','dist/js/*'],{read:false})
.pipe(clean());
});
//将bower的库文件对应到指定位置
gulp.task('bowerCopy', function() {
//fonts
gulp.src('bower_components/bootstrap/fonts/**')
.pipe(gulp.dest('vender/fonts'));
//js
gulp.src('bower_components/jquery/dist/jquery.mim.js')
.pipe(gulp.dest('vender/js'));
gulp.src('bower_components/jquery/dist/jquery.mim.map')
.pipe(gulp.dest('vender/js')); gulp.src('bower_components/angular/angular.min.js')
.pipe(gulp.dest('vender/js'));
gulp.src('bower_components/angular/angular.min.js.map')
.pipe(gulp.dest('vender/js'));
gulp.src('bower_components/bootstrap/dist/js/bootstrap.min.js')
.pipe(gulp.dest('vender/js')); //css
gulp.src('bower_components/bootstrap/dist/css/bootstrap.min.css')
.pipe(gulp.dest('vender/css'));
gulp.src('bower_components/bootstrap/dist/css/bootstrap-theme.min.css')
.pipe(gulp.dest('vender/css'));
gulp.src('bower_components/sui/dist/css/sui.min.css')
.pipe(gulp.dest('vender/css'));
}); //Compile SASS
gulp.task('sass-complie', function(){
gulp.src('src/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});
//转移js
gulp.task('src-move',function(){
gulp.src('src/js/*.js')
.pipe(gulp.dest('dist/js'));
gulp.src('src/css/*.css')
.pipe(gulp.dest('dist/css'));
}); // //合并js文件
// gulp.task('scripts-concat',function(){
// gulp.src('src/js/*.js')
// .pipe(concat('all.js'))
// .pipe(gulp.dest('dist/js'))
// }); //压缩css文件
gulp.task('css-min',function(){
gulp.src('dist/css/*.css')
.pipe(cssmin())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('dist/css'));
}); //压缩js文件
gulp.task('js-min',function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('dist/js'));
}); gulp.task('default',['bowerCopy','sass-complie','src-move']);
Gulpfile.js——编译、压缩、合并js和css文件的更多相关文章
- 第十一节:Bundles压缩合并js和css及原理分析
一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...
- Grunt的配置及使用(压缩合并js/css)
Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- 引用:使用grunt 压缩 合并js、css文件
引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt 目录.png 2.在grunt目录下创建一个 src目录,存 ...
- 压缩/批量压缩/合并js文件
写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-j ...
- 基于node.js的压缩合并安装
1.构建工具(grunt,gulp) 下载地址:http://gruntjs.cn/http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) 验证 ...
- webpack7--css压缩成单独的css文件
先看下下面的图片: 我们可以看到,通过Webpack打包后,默认CSS是通过 内部样式表 写入的.我们如何把压缩后的CSS单独导出为CSS 呢? 1.安装 extract-text-webpack-p ...
- 编写gulpfile.js文件:压缩合并css、js
使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...
- ASP.NET MVC 中CSS JS压缩合并 功能的使用方法
通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...
- [Asp.net MVC]Bundle合并,压缩js、css文件
摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...
随机推荐
- JqGrid TreeView使用
1.前端 <script src="@Url.Content("~/Scripts/jquery/jquery-1.9.0.min.js")" type= ...
- c++ 构造函数,拷贝构造函数,析构函数与赋值操作符
题目: 为下面的Rectangle类实现构造函数,拷贝构造函数,赋值操作符,析构函数. class Shape { int no; }; class Point { int x; int y; }; ...
- FileListEntityProcessor
一个简单的实体处理程序,可以用于枚举标准文件系统中的文件列表,它不需要使用DataSource.属性如下: fileName:(必填) 用正则表达式来标记文件名 baseDir:(必填) 基础目录,绝 ...
- js技巧总结
很早以前看到的代码,同时加上一些我在项目中用到的代码,感觉很实用,在这里记录下来,怕忘记了,有些代码忘记在哪看到的了,所以就不贴网址了,感谢各位大神的分享!如果有其他的好的方法,欢迎留言~ 1.取整的 ...
- 《Cortex-M0权威指南》之体系结构---程序映像和启动流程
转载请注明来源:cuixiaolei的技术博客 我们先来看看程序映像. 通常,Cortex-M0处理器的程序映像时从地址0x00000000处开始的. 程序映像开始处时向量表,其中包含了异常的其实地址 ...
- android studio1.3安装终于成功
本人机器是win7 32位旗舰版,4G内存.以前使用eclipse adt bundle开发Android程序感觉非常方便,但随着google对andriod studio支持力度加大,转向studi ...
- Java Scoket编程
Java Scoket编程 一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位, ...
- Oracle基础 exp/imp 数据泵导入/导出 命令
一.导出方式: 使用exp/imp方式导出数据分为四种方式: 1.表方式导出:一个或多个指定的表,包括表的定义.表数据.表的所有者授权.表索引.表约束,以及创建在该表上的触发器.也可以只导出结构,不导 ...
- Pascal 语言中约瑟夫问题:幸运观众
[题目]节目主持人准备从n名学生中挑选一名幸运观众,因为大家都想争当幸运观众,老师只好采取这样的办法:全体同学站成一列,由前面往后面依顺序报数.1,2,1,2……报单数的同学退出队伍,剩下的同学向前靠 ...
- angular-ui-router state.go not passing data to $stateParams
app.js中定义了一个state如下,url接收一个id参数 $stateProvider.state("page.details", { url: "/details ...