gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。
1.安装gulp
npm install -g gulp
2.切换到项目文件夹后创建gulpfile.js 如下:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename'); gulp.task('minifyjs',function() {
return gulp.src([
'static/scripts/jquery.js',
'static/scripts/moment.js',
'static/scripts/socket.io.js',
'static/scripts/app.js',
'static/scripts/app.request.js',
'static/scripts/app.login.js',
'static/scripts/app.chat.js',
'static/scripts/app.init.js'
]).pipe(concat('all.js')).pipe(uglify()).pipe(gulp.dest('static/scripts/'));
}); gulp.task('minifycss',function() {
return gulp.src([
'static/styles/zee.css',
'static/styles/app.css'
]).pipe(concat('all.css')).pipe(minifycss()).pipe(gulp.dest('static/styles'));
}); gulp.task('default', function() {
gulp.start('minifyjs', 'minifycss');
}); gulp.task('watch',function() {
var watcher = gulp.watch([
'static/scripts/jquery.js',
'static/scripts/moment.js',
'static/scripts/socket.io.js',
'static/scripts/app.js',
'static/scripts/app.request.js',
'static/scripts/app.login.js',
'static/scripts/app.chat.js',
'static/scripts/app.init.js',
'static/styles/zee.css',
'static/styles/app.css'
]);
watcher.on('change', function(event) {
gulp.start('minifyjs', 'minifycss');
});
});
3. 安装插件
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
4.进入终端执行命令
gulp
gulp watch #这个是用来监听文件改动的
gulp使用配置的更多相关文章
-
基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
-
gulp+ThinkPHP配置
gulp+ThinkPHP配置 gulp+ThinkPHP配置 目录结构: html |-src 开发目录 |-Home 静态页面 |-Public 静态资源目录 |-dist 生产目录 |-Home ...
-
前端构建工具:gulp的配置与使用
安装gulp 因为gulp是基于node的管理工具,所以要先安装nodejs安装nodejsnodejs下载地址:中文站:http://nodejs.cn/ 英文站:https://nodejs.or ...
-
使用gulp自动化配置环境变量
使用gulp拷贝文件,可以完成开发api环境变量的配置,例如公司的线上环境有三个: 1.alpha线上测试环境 2.dev线上测试环境 3.test 本地测试环境 (4.production 正式系统 ...
-
gulp实用配置(2)——中小项目
上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指co ...
-
gulp+tp5配置
优化了文件过滤,更改文件只会重新生成修改的文件 项目目录构建: 在入口文件public下,创建html目录,作为前台静态资源目录 gulp.js文件 /*! * gulp * $ npm instal ...
-
gulp实用配置(1)——demo
在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了. 最近一段时间不是太忙,所以就写了三份配 ...
-
gulp+webpack配置
转自:https://www.jianshu.com/p/2549c793bb27 gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开 ...
-
项目使用gulp的配置编译sass笔记
Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版 ...
随机推荐
-
《JavaScript权威指南》学习笔记 第五天 window对象的方法。
前天和昨天大致浏览了犀牛书的函数.类与模块.正则表达式.JavaScript扩展.以及服务端的js.这些方面对于我目前的水平来说比较难,一些最基本的概念都不能领会.不过最复杂的知识占用平时使用的20% ...
-
common常用方法和部分算法
var commonindex = function() {}; commonindex.prototype = { ajaxRequest: function(request) { $.ajax({ ...
-
20 Zabbix系统性能优化建议
点击返回:自学Zabbix之路 20 Zabbix系统性能优化建议 1. Zabbix性能变慢的可能表现: zabbix队列有太多被延迟的item,可以通过administration-queue查看 ...
-
centos的基本操作
1.ssh连接阿里云一段时间不操作自动断开打开/etc/ssh/sshd_config添加或修改: ClientAliveInterval 120ClientAliveCountMax 0 2.挂载数 ...
-
Scala微服务架构 一
因为公司的一个项目需求变动会非常频繁,同时改动在可控范围内,加上产品同学喜欢一些超前思维,我们的CTO决定提前开启八门,使用微服务架构. 划重点 微服务架构主要特点: ==独立组件(自主开发升级)== ...
-
linux --- 3 vim 网络 用户 权限 软连接 压缩 定时任务 yum源
一.vi 和vim vi 是老式的字处理器,不过功能已经很齐全了,但是还是有可以进步的地方. vim 则可以说是程序开发者的一项很好用的工具 ①命令模式 移动光标 w(e) 移动光标到下一个单词 b ...
-
Notes of Daily Scrum Meeting(11.10)
Notes of Daily Scrum Meeting(11.10) 今天是周一,虽然仍然在假期里,但是我们仍然要继续我们团队的开发工作了,分工大家已然都很明确,所以接下来 就是认真投入,把自己负责 ...
-
非极大值抑制(NMS,Non-Maximum Suppression)的原理与代码详解
1.NMS的原理 NMS(Non-Maximum Suppression)算法本质是搜索局部极大值,抑制非极大值元素.NMS就是需要根据score矩阵和region的坐标信息,从中找到置信度比较高的b ...
-
【BZOJ】1486 [HNOI2009]最小圈
[算法]二分+spfa [题解]据说这个叫分数规划? 0-1分数规划 二分答案a,则对于任意的环有w/k≤a即w-ak≤0,若满足条件则a变小,否则a变大. 因为w=w1+w2+...+wk,所以变形 ...
-
Binder学习笔记(六)—— binder服务端是如何组织addService数据的
在checkService的调查中我们知道客户端向ServiceManager请求服务名,ServiceManager根据服务名遍历本地链表,找到匹配的handle返回给客户端.这个handle显然是 ...