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 ...
随机推荐
- C 标准库 - <stddef.h>
C 标准库 - <stddef.h> 简介 stddef .h 头文件定义了各种变量类型和宏.这些定义中的大部分也出现在其它头文件中. 库变量 下面是头文件 stddef.h 中定义的变量 ...
- Odoo电子数据交换(EDI)
Odoo EDI功能能在odoo实例之间交换数据,可以交换哪些数据呢? 默认支持: account.invoice 发票,含发票行 res.currency res.partner purchase. ...
- ubuntu + lamp + laravel 环境配置
首先是LAMP 安装顺序是 A(Apache服务器) M(Mysql) P(Php) 安装apache sudo apt-get install apache2 安装mysql sudo apt-g ...
- UiAutomator源代码分析之获取控件信息
依据上一篇文章<UiAutomator源代码分析之注入事件>開始时提到的计划,这一篇文章我们要分析的是第二点: 怎样获取控件信息 我们在測试脚本中初始化一个UiObject的时候一般是像下 ...
- vim 插件: ctrlp.vim
vim-scripts 里可以搜到这个插件. 安装好了之后,在 vim 的 normal 模式之下按 Ctrl+P 组合键即可弹出搜索窗口. * <f5> 更新目录缓存. * <c- ...
- MySQL安装过程中出现“APPLY security settings错误”的解决方式
***********************************************声明*************************************************** ...
- Python 008- 游戏2048
#-*- coding:utf-8 -*- import curses from random import randrange, choice # generate and place new ti ...
- 【BZOJ3218】a + b Problem 可持久化线段树优化建图
[BZOJ3218]a + b Problem 题解:思路很简单,直接最小割.S->i,容量为Bi:i->T,容量为Wi:所有符合条件的j->new,容量inf:new->i, ...
- sort_action
li, r = [23,8, 45, 5, 0, -6, 745,8, 8], [] while (len(li) > 0): loop_, min, tag = len(li), li[0], ...
- java的取出map里所有元素的两种方式
/* * 取出map元素的两种方式 */package com.map.test; import java.util.HashMap;import java.util.Iterator;import ...