GULP入门(一)
1.首先要先装node.然后在命令行里安装全局的gulp:
npm install --global gulp
这是gulp在的生成的位置
2.接下来,我们需要将gulp安装到项目本地
npm install —-save-dev gulp
这里,我们使用 —-save-dev
来更新package.json文件,更新 devDependencies
值,以表明项目需要依赖gulp。
Dependencies
可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看 package.json文档 。
3.接下来加载gulp的插件,我现在主要是压缩 ,下面装了三个插件,分别是合并,最小化和混淆。
4.在项目的中创建gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
del = require('del') gulp.task('js',function(){
return gulp.src('./routes/*.js') //有的JavaScript文件,然后排除后缀为.min.js的文件: gulp.src(['js/**/*.js', '!js/**/*.min.js'])
.pipe(uglify()) //取消文件缩进
.pipe(concat('app.js')) //合并
.pipe(gulp.dest('dist/js')) //保存为build/app.js
}) /*gulp.task('clean',function(cb){
del(['dist/js'],cb)
})*/ gulp.task('default',function(){
// 将你的默认的任务代码放在这
gulp.start('js')
})
5.然后运行
GULP入门(一)的更多相关文章
- Gulp入门教程(转载)
本人转载自: Gulp入门教程
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- Gulp入门与解惑
Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...
- gulp 入门使用
gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...
- 【转】Gulp入门基础教程
Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...
- gulp入门与一些基本设置
这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...
- gulp入门演练
一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...
- 前端小白的gulp入门
gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...
- gulp入门学习教程(入门学习记录)
前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...
随机推荐
- POJ-2499-Binary Tree-思维题
Background Binary trees are a common data structure in computer science. In this problem we will loo ...
- 响应式编程(Reactive Programming)(Rx)介绍
很明显你是有兴趣学习这种被称作响应式编程的新技术才来看这篇文章的. 学习响应式编程是很困难的一个过程,特别是在缺乏优秀资料的前提下.刚开始学习时,我试过去找一些教程,并找到了为数不多的实用教程,但是它 ...
- map 与 lambda 的用法
# 列表中的每个元素进行*2lis = [10, 30, 70]f = map(lambda li: li*2, lis) # 操作lis中的每个元素.print(list(f)) # 返回来一个新的 ...
- 2018-8-10-VisualStudio-2017-项目格式-自动生成版本号
title author date CreateTime categories VisualStudio 2017 项目格式 自动生成版本号 lindexi 2018-08-10 19:16:52 + ...
- login-Linux必学的60个命令
1.作用 login的作用是登录系统,它的使用权限是所有用户. 2.格式 login [name][-p ][-h 主机名称] 3.主要参数 -p:通知login保持现在的环境参数. -h:用来向远程 ...
- 使用Cookie实现用户商品历史浏览记录
该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...
- [JZOJ4648] 【NOIP2016提高A组模拟7.17】锦标赛
题目 描述 题目大意 有nnn个人,你要确定一个出场序列.每次新上台的人就会和擂主打一架,胜利的人继续当擂主.题目给出两两之间打架胜利(失败)的概率. 问111选手坚持到最后的最大概率. 思考历程 看 ...
- 2016.11.5初中部上午NOIP普及组比赛总结
2016.10.29初中部上午NOIP普及组 这次比赛算是考的最差的一次之一了,当中有四分之三是DP. 进度: 比赛:没分+0+没分+40=40 改题:AC+0+没分+40=140 TurnOffLi ...
- 模拟+贪心——cf1131E
超级恶心的题,写了好久,直接倒序模拟做,但是网上有博客好像是直接正序dp做的.. 因为左端点和右端点是永远不会变的,然后情况要考虑全 /* 从后往前插 只要记录左连续,右连续,中间连续 左端点一定是L ...
- Vue数据双向绑定(面试必备) 极简版
我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: ...