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简单应用的更多相关文章

  1. 基于流的自动化构建工具------gulp (简单配置)

    项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...

  2. 前端自动化构建工具Gulp简单入门

    昨天听同事分享了Gulp的一些简单使用,决定自己也试一试. 一.安装 gulp是基于nodejs的,所以要先下载安装node(直接搜node,在官网下载就好了) 1.全局安装gulp npm inst ...

  3. Gulp 简单的开发环境搭建

    //获取gulp //require()是 node (CommonJS)中获取模块的语法 var gulp=require('gulp'); //获取gulp-concat模块(用于合并文件):np ...

  4. gulp简单使用小记

    npm install --save-dev 写入package.json里     var gulp = require('gulp'); var less = require('gulp-less ...

  5. 自动化构建工具gulp简单介绍及使用

    一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...

  6. vue + webpack + gulp 简单环境 搭建

    一.物料准备 废话不多说,直接上 package.json { "name": "vwp", "version": "1.0.0& ...

  7. gulp简单使用

    1.安装gulp,由于某些在下不能解决的原因,故使用gulp 3.9.1版本 安装命令: npm install gulp@3.9.1 注意不要直接使用 : npm install gulp 安装,直 ...

  8. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

  9. Local gulp not found in.. on windows

    当出现报错时,请按如下方式安装 gulp 以下使用国内的淘宝镜像安装: $ # Step 1 $ cnpm install -g gulp $ # Step 2 $ cnpm install --sa ...

随机推荐

  1. Android系统开发(6)——Linux底层输入输出

    一.操作系统的体系结构 计算机是由一堆硬件组成的,操作系统是为了有效的控制这些硬件资源的软件.操作系统除了有效地控制这些硬件资源的分配.并提供计算机执行所须要的功能之外,为了提供程序猿更easy开发软 ...

  2. makefile编写---.c .cpp 混合编译makefile 模板

    # c.cpp混合编译的makefile模板 # # BIN = client_system BASE_INSTALL_DIR := /opt/arm-2009q1 BUILD_TOOL_DIR := ...

  3. lnmp下 nginx 配置虚拟主机

    <一.参考> 这里以配置2个站点(2个域名)为例,n 个站点可以相应增加调整,假设: IP地址: 202.55.1.100 域名1 example1.com 放在 /www/example ...

  4. [IT新应用]如何拯救死机的苹果手机(iPhone X)

    突然白天接了一个电话,苹果就死机了.这是用这个手机半年来第一次.貌似还能接电话,就是屏幕上一个白色的圆圈,一直转啊转. 后来百度了一下,找到这一篇.将重点部分摘录如下: http://www.sohu ...

  5. 基于EasyDarwin EasyPusher实现Android手机直播推送功能

    EasyPusher直播推送在之前就已经稳定支持了Windows.Linux.ARM上的RTSP直播推送功能,配合EasyDarwin开源流媒体服务器,延时基本在1s以内,这个技术方案经过一年多时间, ...

  6. javascript 获取当前日期 月份 时间

    <script type="text/javascript"> function getDate() { var date = new Date(); //得到当前日期 ...

  7. Android笔记之为自定义对话框添加移动动画效果

    给底部的对话框添加移动动画效果 可通过Window.setWindowAnimations(int resId)设置 SharingDialog.java package com.bu_ish.sha ...

  8. 代码空间项目 -- alert窗口自定义

    function z_alert(msg){    //创建提示框盒子,设置盒子的css样式    var msgBox=document.createElement("div") ...

  9. Apache Thrift的简单介绍

    1.什么是Thrift thrift是一种可伸缩的跨语言服务的发展软件框架.它结合了功能强大的软件堆栈的代码生成引擎,以建设服务.不同开发语言开发的服务可以通过该框架实现通信. thrift是face ...

  10. UVA 11752 The Super Powers —— 数学与幂

    题目链接:https://vjudge.net/problem/UVA-11752 题解: 1.首先变量必须用unsig long long定义. 2.可以分析得到,当指数为合数的时候,该值合法. 3 ...