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 ...
 
随机推荐
- JavaScript技巧手冊
			
js小技巧 每一项都是js中的小技巧,但十分的有用! 1.document.write(""); 输出语句 2.JS中的凝视为// 3.传统的HTML文档顺序是:documen ...
 - OpenGL之路(七)为立方体加入丰富色彩
			
在立方体的六个面贴上不同的颜色,假设想达到混合颜色的效果,能够參照立方体的前面代码在每一行前都加上颜色 代码例如以下 #include <gl/glut.h> #pragma commen ...
 - Java集合01----ArrayList的遍历方式及应用
			
Java集合01----ArrayList的遍历方式及应用 前面已经学习了ArrayList的源代码,为了学以 ...
 - AVL平衡树的插入例程
			
/* **AVL平衡树插入例程 **2014-5-30 11:44:50 */ avlTree insert(elementType X, avlTree T){ if(T == NULL){ T = ...
 - Linux 中如何查询和卸载已安装的软件
			
Linux 中如何查询和卸载已安装的软件 Linux软件的安装和卸载一直是困扰许多新用户的难题.在Windows中,我们可以使用软件自带的安装卸载程序或在控制面板中的“添加/删除程序” 来实现.与其相 ...
 - Android  非静态内部类导致内存泄漏原因深入剖析
			
背景 上周发现蘑菇街IM-Android代码里面.一些地方代码编写不当.存在内存泄漏的问题.在和疯紫交流的过程中.发现加深了一些理解,所以决定写一下分析思路,相互学习. 内存泄漏 一个不会被使用的对象 ...
 - hdu1878欧拉回路(DFS+欧拉回路)
			
欧拉回路 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
 - java nio 通道(二)
			
本文章来源于我的个人博客: java nio 通道(二) 一,文件通道 文件通道总是堵塞式的,因此不能被置于非堵塞模式. FileChannel对象是线程安全的.多个进程能够在同一个实例上并发调用方法 ...
 - PowerDesigner逆向工程,从SQL Server数据库生成Physical Model -----数据源方式
			
1.File-Reverse Engineer-Database 2.DBMS选择SQL Server 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 一路Next..... ...
 - 2016/07/07  PHP的线程安全与非线程安全版本的区别
			
Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和None Thread Safe(NTS,非线程安全)之分,这两者不同在于何处?到底应该用哪种?这里做一个简单的介绍. ...