Cordova中使用gulp

打开package.json,添加main:gulpfile.js

?
?

在dependencies中添加gulp,vs2015十分智能,可以智能从npm中获取依赖如下图:

?
?

在添加过程中注意查看输出,如下图

?
?

如果提示node js或者npm版本过低需要更新,如果更新后还是过低需要调整vs2015设置如下,取消使用沙盒版本.

?
?

添加完毕后的依赖项显示如下:

?
?

?
?

打开gulpfile.js编写如下代码,意在改名和压缩js.

var gulp = require("gulp");

var rename = require("gulp-rename");

var uglify = require("gulp-uglify");

?
?

gulp.task("minjs", function () {

gulp.src(["www/scripts/*.js", "!www/scripts/*.min.js"])

.pipe(rename({ suffix: ‘.min‘ }))

.pipe(uglify())

.pipe(gulp.dest("www/scripts"));

});

?
?

编写完毕后运行任务,如下图所示:

如果右键没有任务运行程序资源管理器,需要从视图菜单获取,如下图:

?
?

任务运行程序资源管理器
如下图所示,右键运行即可.

?
?

生成的js如下图所示:

?
?

?
?

时间: 2024-11-06 13:18:40

Cordova中使用gulp的相关文章

VS中使用Gulp

关于gulp资料可以访问:http://www.gulpjs.com.cn/,本篇主要讲解在VS中使用gulp对js和css进行压缩合并 1.下载node.js,gulp依赖于node.js,可以访问http://nodejs.cn/下载,本人下载的4.4.4版本,下载完后进行傻瓜式安装,注意安装路径最好不要含有空格或中文 2.安装gulp以及需要的插件 1.输入命令进行安装gulp npm install --global gulp 2.安装需要用到的插件,可以选择安装 npm install

前后端分离中,Gulp实现头尾等公共页面的复用

前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面的数量上去了而中途公共的部分出现要修的地方.不过有上10个页面都用到了这个公共的html代码.那修改起来不是很麻烦吗? 一些其他方法比如ifram,import都不够优雅,并且源代码中的不显示的,也就不利于SEO 头部: 尾部: 对于后端的同学而言,他们可以通过模版来进行拆分.这样做可以提高html

在Visual Studio 2015的Cordova项目中使用Gulp

之前一直是在vs 2013中使用Cordova来开发移动app(目前有iPad版/iPhone版/安卓版),准备到下一个milestone的时候升级到2015,这两天在尝试各种东西. 2015中的cordova项目和2013结构变化很大,所以需要一个手动迁移过程,这个过程之前已经有同事尝试过了,包括很多插件可能都要重新安装,不同插件的使用可能还有些不太一样. 这两天在研究如何在项目里使用gulp这个前端集成工具,vs 2015支持这个东西是一个非常大的利好,之前很多事情现在都可以自动来做了. g

在ionic/cordova中使用极光推送插件(jpush)

Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容: Stpe3:创建极光项目 注册极光开发者账号,并新建项目并获取AppKey如下图: Stpe4:安装极光推送cordova插件(jpush-phonegap-plugin) 检查你的项目plugin目录中是否有[cordova-plugin-device]目录.若存在,建议先卸载他.卸载命令:ionic plugin

Ionic学习笔记三 Gulp在ionic中的使用

简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm install -g gulp npm install --save-dev gulp 创建文件 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default ta

gulp项目和webpack项目在浏览器中查看的方式

在存在.git的目录下,按住shift+左键,打开命令行或者使用git Bash Gulp: 输入gulp dev 本地起一个服务器,在项目中找到gulp.js,然后找本地服务器,找到host和port,此种方法可自动监听修改 Host:port Webpack: 输入npm run dev 在项和目中找到tools,在console.base.config.js中找到host和port,此种方法可自动监听修改 Host:port 原文地址:https://www.cnblogs.com/kun

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

git上传文件到github与gulp的简单使用

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传 git使用ssh方式上传代码到githubgit首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地 + 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下. 把代码push到服务器时需要先pull一下(pull的作用是从远程下载git项目里的文件,然后将文件与本地的分支进行merge) git pull和gitclone区别:git pull

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的