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-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify
3、输入gulp -v,如果能出现版本号说明安装成功
3、新建Web项目,并在项目根目录下新建gulpfile.js,内容为:
var gulp = require('gulp'); // 引入组件
var //htmlmin = require('gulp-htmlmin'), //html压缩
minifycss = require('gulp-minify-css'),//css压缩
uglify = require('gulp-uglify'),//js压缩
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename'),//文件更名
notify = require('gulp-notify');//提示信息 /*
*:匹配任意数量的字符,不包括/
?:匹配单个字符,不包括/
**:匹配任意数量的字符,包括/
{}:允许使用逗号分隔的列表,表示“or”(或)关系
!:用于模式的开头,表示只返回不匹配的情况
*/
//比如,Scripts/*.js匹配Scripts目录下面的文件名以.js结尾的文件,
//CSS/**/*.css匹配CSS目录和它的所有子目录下面的文件名以.css结尾的文件,
//!*.css表示匹配所有后缀名不为“.css”的文件。
var cssPath = ['CSS/**/*.css'];
var jsPath = ['Scripts/*.js']; // 合并、压缩、重命名css
gulp.task('css', function () {
return gulp.src(cssPath)
.pipe(concat('main.css'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dest/css'));
//.pipe(notify({ message: 'css task ok' }));
}); // 合并、压缩js文件
gulp.task('js', function () {
return gulp.src(jsPath)
.pipe(concat('main.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dest/js'));
//.pipe(notify({ message: 'js task ok' }));
}); // 默认任务
gulp.task('default', function () {
gulp.run('css', 'js'); // 监听 .css files 改变则会重新压缩
gulp.watch(cssPath, ['css']); // 监听 .js files 改变则会重新压缩
gulp.watch(jsPath, ['js']);
});
4、如果安装的是VS2015则不需要安装插件,右键gulpfile.js会有task runner explorer,如果是VS2013或其他版本:
在VS工具-扩展更新-联机-输入task runner explorer搜索安装
5、如果出现此页面则成功了,双击某个任务即可运行
6、我这里是双击default任务,运行结果:
结语:在默认的系统盘下安装了gulp以及插件,但是换到其他盘符又不行了,需要重新在该盘安装
VS中使用Gulp的更多相关文章
- 前后端分离中,Gulp实现头尾等公共页面的复用
前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...
- Cordova中使用gulp
打开package.json,添加main:gulpfile.js 在dependencies中添加gulp,vs2015十分智能,可以智能从npm中获取依赖如下图: 在添加过程中注意 ...
- 前后端分离中,gulp实现头尾等公共页面的复用 前言
前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...
- vscode中执行gulp task的简便方法
本文重点是gulp在vscode中执行task任务的方法 如何像webstorm那样简便操作gulp 的task 第1步:安装node.下载地址:https://nodejs.org/zh-cn/ 检 ...
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
- 在Visual Studio 2015的Cordova项目中使用Gulp
之前一直是在vs 2013中使用Cordova来开发移动app(目前有iPad版/iPhone版/安卓版),准备到下一个milestone的时候升级到2015,这两天在尝试各种东西. 2015中的co ...
- 记项目中ES6+gulp+angularjs里的问题
AngualrJs中可用来注入的有三种类型,service.factory.provider,这三种写法不样,用法也都不一样.其中,service只实例化一次,其实就是单例模式的思想.无论我们在什么地 ...
- Ionic学习笔记三 Gulp在ionic中的使用
简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...
- 使用gulp在开发过程中合理导出zip文件
最近一段时间一直在做桌面混合应用,跟以往做web端不同的是,无法再通过在浏览器上输入内部的域名来随时跟踪开发版本的状况了,只能通过打包代码让产品或领导随时跟踪进度. 这里就涉及到一些问题了: 1,需要 ...
随机推荐
- php laravel 框架搭建与运行
目录 安装 composer 安装 laravel 运行 php hello world 一.安装 composer (mac) 下载 composer.phar 下载地址:https://getco ...
- could not read column value from result set:
错误描述: INFO [http-apr-8080-exec-26] (NullableType.java:203) - could not read column value from result ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- ES 1.7安装ik分词elasticsearch-analysis-ik-1.2.5中文同义词实现
ElasticSearch 中文同义词实现 https://blog.csdn.net/xsdxs/article/details/52806499 参考以下两个网址,但运行报错,以下是我自己改进方式 ...
- NotifyIcon控件
NotifyIcon就是系统托盘控件.通知区域中的图标是一些进程的快捷方式,这些进程在计算机后台运行,如防病毒程序或音量控制.这些进程不会具有自己的用户界面.NotifyIcon 类提供了编写此功能的 ...
- hdu 1285 确定比赛名次 (拓扑)
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 【题解】MUTC2013idiots
我是先知道的这题是FFT然后再做的,知道是FFT其实就是个套路题啦.首先,我们容易发现 \(P = \frac{a}{b}\) 其中a表示合法的方案数,而b表示全部的方案数. b的值即为\(C\lef ...
- BZOJ_day5
32题...今天颓了不想再写了
- 什么是node.js的事件驱动编程
Node.js现在非常活跃,相关生态社区已经超过Lua(基本上比较知名的功能都有nodejs模块实现).但是我们为何要使用Node.Js?相比传统的webserver服务模式,nodejs有什么优点优 ...
- DOM 2
1.对文档的信息进行检索常用的方法: getElementById; getElementsByTagName; getAttribute;//得到的是属性值 2把需要的信息添加到DOM中常用的方法: ...