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

  1. 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  2. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  3. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  4. 引用:使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  5. 压缩/批量压缩/合并js文件

    写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-j ...

  6. 基于node.js的压缩合并安装

    1.构建工具(grunt,gulp) 下载地址:http://gruntjs.cn/http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) 验证 ...

  7. webpack7--css压缩成单独的css文件

    先看下下面的图片: 我们可以看到,通过Webpack打包后,默认CSS是通过 内部样式表 写入的.我们如何把压缩后的CSS单独导出为CSS 呢? 1.安装 extract-text-webpack-p ...

  8. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  9. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  10. [Asp.net MVC]Bundle合并,压缩js、css文件

    摘要 在web优化中有一种手段,压缩js,css文件,减少文件大小,合并js,css文件减少请求次数.asp.net mvc中为我们提供一种使用c#代码压缩合并js和css这类静态文件的方法. 一个例 ...

随机推荐

  1. IIS 之 HTTP 错误 403.14 - Forbidden

    错误如下图所示: 其实,这个提示下面已经交代了怎么解决问题,现在告诉大家具体的详细步骤. 方法一:配置" 默认文档 " 方法二:启用" 目录浏览 "

  2. 百度地图开发之poi检索,线路规划

      官方文档 http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key 先去官方文档申请秘钥下载压缩文件等操作,参考 百度地图的秘钥申请 ...

  3. uva 216 Getting in Line 最短路,全排列暴力做法

    题目给出离散的点,要求求出一笔把所有点都连上的最短路径. 最多才8个点,果断用暴力求. 用next_permutation举出全排列,计算出路程,记录最短路径. 这题也可以用dfs回溯暴力,但是用最小 ...

  4. LRU在MySQL缓存池的实现

    MySQL的InnoDB引擎设置有索引及数据缓存池,其中用到的LRU算法来维持缓存的命中率 这里用到了顺序表list来作为缓冲池,每个数据节点称为block 该算法采用“中点插入法”:当插入一个新bl ...

  5. emoji表情符处理替换成空格

    /**    * 用filterOffUtf8Mb4    * Description: 过滤率四个字节的utf-8字符(emoji表情符),替换成四个空格.    *         四字节utf- ...

  6. poj 3417 树形dp+LCA

    思路:我以前一直喜欢用根号n分段的LCA.在这题上挂了,第一次发现这样的LCA被卡.果断改用Tarjan离线算法求LCA. 当前节点为u,其子节点为v.那么: 当以v根的子树中含有连接子树以外点的边数 ...

  7. CF 118E Bertown roads 桥

    118E Bertown roads 题目:把无向图指定边的方向,使得原图变成有向图,问能否任意两点之间互达 分析:显然如果没有桥的话,存在满足题意的方案.输出答案时任意从一个点出发遍历一遍即可. 求 ...

  8. 水题2枚 Codevs1464&&Codevs1472

    1472 体检  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 郑厂长不是正厂长 也不是副厂长 ...

  9. HTML CSS编码规范(黄金定律)

    HTML 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不 ...

  10. Stimulsoft Reports筛选数据来绑定显示2个报表

    今天用Stimulsoft Reports做报表的时候,遇到一个问题,需要一个报表中显示2个报表视图,我在百度和博客园中搜索了一下,发现这方面的资料很少,我自己最后把问题解决了之后,整理了一下给大家分 ...