Gulp简单应用
1.创建一个工程,在webstorm控制台 cnpm install --save-dev gulp cnpm install --save-dev gulp-concat cnpm install --save-dev gulp-minify
2.环境配置完成后, 创建src文件,放置源 index.html,main.js,和其他的js文件
3.创建配置文件 gulpfile.js 文件
/**
* Created by Administrator on 2016/11/10.
*/ const gulp=require("gulp");
const minify=require("gulp-minify");
const concat=require("gulp-concat"); const buildDirName = "build";
gulp.task("copy_html_files",function () {
return gulp.src("src/*.html").pipe(gulp.dest(buildDirName))
}); gulp.task("compile_js_files",function () {
return gulp.src([
"src/Hello.js",
"src/Main.js"
]).pipe(concat("index.js"))
.pipe(minify())
.pipe(gulp.dest(buildDirName)); }); gulp.task("default",["copy_html_files","compile_js_files"],function () { }); /*自动监测 html 文件的变化*/
gulp.watch("src/*.html",["copy_html_files"]); gulp.watch("src/*.js",["compile_js_files"]);
4.在命令行输入 gulp ,自动生成上述代码中的 build 文件夹(包括inde.html,index.js,index-min.js)
5.运行在build文件夹中的index.html即可
Gulp简单应用的更多相关文章
- 基于流的自动化构建工具------gulp (简单配置)
		项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ... 
- 前端自动化构建工具Gulp简单入门
		昨天听同事分享了Gulp的一些简单使用,决定自己也试一试. 一.安装 gulp是基于nodejs的,所以要先下载安装node(直接搜node,在官网下载就好了) 1.全局安装gulp npm inst ... 
- Gulp 简单的开发环境搭建
		//获取gulp //require()是 node (CommonJS)中获取模块的语法 var gulp=require('gulp'); //获取gulp-concat模块(用于合并文件):np ... 
- gulp简单使用小记
		npm install --save-dev 写入package.json里 var gulp = require('gulp'); var less = require('gulp-less ... 
- 自动化构建工具gulp简单介绍及使用
		一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ... 
- vue + webpack + gulp 简单环境 搭建
		一.物料准备 废话不多说,直接上 package.json { "name": "vwp", "version": "1.0.0& ... 
- gulp简单使用
		1.安装gulp,由于某些在下不能解决的原因,故使用gulp 3.9.1版本 安装命令: npm install gulp@3.9.1 注意不要直接使用 : npm install gulp 安装,直 ... 
- Gulp自动化构建工具的简单使用
		相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ... 
- Local gulp not found in.. on windows
		当出现报错时,请按如下方式安装 gulp 以下使用国内的淘宝镜像安装: $ # Step 1 $ cnpm install -g gulp $ # Step 2 $ cnpm install --sa ... 
随机推荐
- 从TCP协议的原理来谈谈rst复位攻击
			在谈RST攻击前,必须先了解TCP:如何通过三次握手建立TCP连接.四次握手如何把全双工的连接关闭掉.滑动窗体是怎么数据传输的.TCP的flag标志位里RST在哪些情况下出现.以下我会画一些尽量简化的 ... 
- weblogic的几点配置
			2.在tomcat下写过滤器以后还有的地方需要手工转码<-->weglobic下也不用 eg:SubjectAction.java3.weblogic下anltr.jar有冲突,需要从外界 ... 
- C++继承:公有,私有,保护(转)
			公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ... 
- Solaris服务管理
			远程登录协议 telnet \ssh 等.当然我们可以查看谁登录过我的系统,以及可以利用ftp记录日志. 一.SMF: 服务管理工具 优点:自动恢复意外终止的服务,支持服务的依赖关系,一个服务可以有多 ... 
- android实例讲解----Tomcat部署Web应用方法总结
			参考文档:http://blog.csdn.net/yangxueyong/article/details/6130065 Tomcat部署Web应用方法总结 一.架构介 ... 
- 高速创建和mysql表相应的java domain实体类
			今天创建了一个表有十几个字段,创建完之后必定要写一个与之相应的java domain实体类. 这不是反复的工作吗?为什么不先把这个表的全部的字段查出来,然后放到linux环境下,用sed工具在每一行的 ... 
- Selenium系列之--07 操作远程浏览器
			Selenium远程控制浏览,可以通过如下两种方式实现,本质上都是Selenium Grid a. 客户机启Selenium Standalone Server 作为远程服务,服务端通过调用Remo ... 
- 为Redmine的项目加上起止时间
			没有时间约束的项目不是好项目. 要给项目配置起止时间,须要用到自己定义属性. 我们须要管理员身份登录.才干够定义自己定义属性. 自己定义属性 看图吧,先是点击页面导航条(最上面那排菜单,有主页.我的工 ... 
- Android_动态权限管理的解决方式
			本博文为子墨原创.转载请注明出处! http://blog.csdn.net/zimo2013/article/details/50478201 1.前言 (1).因为MIUI等部分国产定制系统也有权 ... 
- HDU-4930 Fighting the Landlords  多校训练赛斗地主
			仅仅须要推断一个回合就能够了,枚举推断能够一次出全然部牌或者大过对面的牌的可能,注意的是4张同样的牌带两张牌的话是能够被炸弹炸的. #include <iostream> #include ... 
