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 ...
随机推荐
- 更改 vux Tabbar TabbarItem标题下方的文字激活时的颜色
步骤一: 打开文件build/webpack.base.conf.js, 找到modeule.exports = vuxLoader, 修改如下(并保存) module.exports = vuxLo ...
- 搭建windows下的odoo开发环境
odoo运行环境的必须要要求是 python环境 postgreSQL数据 数据库可以安装在别的机器上,比如服务器:当然对于开发环境,通常,数据库与代码调试安装在同一台机器上. 首先安装 postgr ...
- Solaris网络基础
划分子网: 把大网缩小为若干个小网.修改子网掩码,划分多个网络. 那么如何确定子网的子网掩码和IP地址? 以上你会发现少了6个IP. Ifconfig e1000g0 down down掉网卡 ...
- 借助autoit操作上传下载对话框(参数化)
虫师有一篇文章写的不错,链接如下:http://www.cnblogs.com/fnng/p/4188162.html 他的文章把upload.exe需要上传的文件写死了,下面的内容作为补充. 如果不 ...
- 如何学习Java?
一点感悟 java作为一门编程语言,在各类编程语言中作为弄潮儿始终排在前三的位置,这充分肯定了java语言的魅力,在实际项目应用中,我们已经无法脱离javaa(Ps当然你可以选择不使用),但它的高性能 ...
- React Native组件解析(二)之Text
React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...
- lnmp下 nginx 配置虚拟主机
<一.参考> 这里以配置2个站点(2个域名)为例,n 个站点可以相应增加调整,假设: IP地址: 202.55.1.100 域名1 example1.com 放在 /www/example ...
- 使用UIWebView载入本地或远程server上的网页
大家都知道,使用UIWebView载入本地或远程server上的网页,sdk提供了三个载入接口: - (void)loadRequest:(NSURLRequest *)request; - (voi ...
- iOS开发中的单元测试(三)——URLManager中的测试用例解析
本文转载至 http://www.cocoachina.com/cms/plus/view.php?aid=8088 此前,我们在<iOS开发中的单元测试(一)&(二)>中介绍 ...
- switch多分枝语句
package lianxi; //switch多分枝语句 import java.util.Scanner; public class GetSwitch { public static void ...