gulp 基础运用
- 全局安装gulp
$npm install --global gulp
- 作为项目的开发依赖安装
//--save-dev 开发依赖,储存在package.json的devDependencies中,如gulp,grunt
//--save 发布之后的依赖,储存在package.json的dependencies中,如jquery,angular $ npm install --save-dev gulp - 在项目下创建一个gulpfile.js文件
var gulp = require('gulp'); gulp.task('default', function() {
// 将你的默认的任务代码放在这
}); - 运行gulp
$ gulp //运行default的task,如果单独执行task, gulp <task> <othertask>
- api
//默认的,task 将以最大的并发数执行,也就是说,gulp 会一次性运行所有的 task 并且不做任何等待。若要顺序执行,建立依赖
var gulp = require('gulp'); // 返回一个 callback,因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
console.log(1);
}); // 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
console.log(2);
}); gulp.task('default', ['one', 'two']); //gulp.src 输出符合匹配的文件,通过.pipe执行压缩合并等操作
//gulp.desk 能被 pipe 进来,并且将会写文件。并且重新输出所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates')); //gulp.watch 监听事件并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射change 事件。 gulp.task('watch', function () {
//监听app/assets 下的所有二级目录中的所有.less文件,发生改变,执行名为less的task文件
gulp.watch('app/assets/**/*.less', ['less']);
}); - 引入模块
//connect静态服务器
var connect = require("gulp-connect"); // 合并文件模块
var concat = require('gulp-concat'); //less编译模块
var less = require('gulp-less'); //压缩js
var uglify = require('gulp-uglify');
//压缩css
var minifyCss = require('gulp-minify-css');
//压缩html
var minifyHtml = require('gulp-minify-html'); //项目中需要将.less文件重命名为.css var rename = require('gulp-rename'); //jshint检查js静态语法检查
var jshint = require('gulp-jshint');
gulp 基础运用的更多相关文章
- gulp基础操作实践
按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...
- Gulp基础
1.什么是gulp? gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. 2.为什么使用gulp? gulp不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工 ...
- gulp基础使用总结
gulp 安装 1 检测电脑有没有安装node 执行 $ node -v $ npm -v 如果没有安装的话,可以到https://nodejs.org/en/download/下载安装. 2 全局安 ...
- Gulp基础知识
首先,我们需要了解Gulp能做些什么? 编译 sass sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...
- gulp.基础
1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js ...
- gulp基础使用及进阶
提示:路径中不允许出现中文,否则scss编译会出错,大概. 按照惯例,先检查一下Node.js.npm(cnpm).gulp的版本号 1.新建package.json 我们可以通过手动新建这个配置文件 ...
- 【gulp】工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp,直接可以拿这篇博客中的来用,因为有时候配置还是挺烦人的. gulp相关插件的介绍 用法比较简单,假设大家都会用gulp,下面主要介绍一下一些插件的 ...
- Gulp真实项目用例
包括了less预编译,css压缩,html文件include引入,js混淆压缩,本地开发热刷新服务器,html压缩,版本号添加 github地址: gulpfile.js var gulp = req ...
- gulp学习-gulpfile
安装gulp 假设已经安装了node 和npm (淘宝的cnpm很适合国内使用). 1.首页全局安装gulp. 1 npm install --global gulp 2.其次局部安装gulp.(注: ...
随机推荐
- FileZilla Server 防火墙端口开启设置 windows 2008 win
入站规则 添加21端口, 程序FileZilla server.exe 出站规则 %SystemRoot%\System32\ftp.exe
- CentOS SSH安装与配置
SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议. 传 统的网络服务程序, ...
- 【HDOJ】3386 Final Kichiku “Lanlanshu”
数位DP.需要注意的是需要特殊处理前导0,另外连续的==匹配,不要计重了,尽量贪心的匹配掉. /* 3886 */ #include <iostream> #include <sst ...
- Counting sheep...
Counting sheep... Description: Consider an array of sheep where some sheep may be missing from their ...
- POJ (线段相交 最短路) The Doors
题意: 一个正方形中有n道竖直的墙,每道墙上开两个门.求从左边中点走到右边中点的最短距离. 分析: 以起点终点和每个门的两个端点建图,如果两个点可以直接相连(即不会被墙挡住),则权值为两点间的欧几里得 ...
- UVa 10622 (gcd 分解质因数) Perfect P-th Powers
题意: 对于32位有符号整数x,将其写成x = bp的形式,求p可能的最大值. 分析: 将x分解质因数,然后求所有指数的gcd即可. 对于负数还要再处理一下,负数求得的p必须是奇数才行. #inclu ...
- (转载)关于gcd的8题
发现其实有关gcd的题目还是挺多的,这里根据做题顺序写出8题. [bzoj2818: Gcd] gcd(x,y)=质数, 1<=x,y<=n的对数 做这题的时候,懂得了一个非常重要的转化: ...
- SSH2中memcached作为hibernate二级缓存
一.安装memcached服务端 1. 下载memcached的windows稳定版,解压放某个盘下面,比如在c:\memcached2. 在CMD下输入 "c:\memcached\mem ...
- date 获取昨天日期
使用date -d 选项: date +"%Y%m%d" -d "+n days" 今天的后n天日期 date +" ...
- (六)学习MVC之标签a提交页面
标签<a>如何做到与<input type="submit"/>一样有提交页面信息的效果? @using (Html.BeginForm("Log ...