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. 【KMP】hdu1867(A + B for you again) 杭电java a题真坑

    点击打开链接 Problem Description Generally speaking, there are a lot of problems about strings processing. ...

  2. 虚幻4Matinee功能 基本概念及简单演示样例(Sequence编辑器)

    虚幻4提供的Matinee功能十分强大,能够用来制作动画.录制视频. 它的核心想法是在Matinee编辑器内提供一套自己的时间坐标系,在这个相对时间内通过调节actor的属性来改变actor的状态,进 ...

  3. C# 知识点随手学习网站推荐

    http://www.studyofnet.com/news/list-8881.2-1-1.html

  4. 图像处理算法2——Otsu最佳阈值分割法http://blog.csdn.net/xiaqunfeng123/article/details/17121195

    http://blog.csdn.net/xiaqunfeng123/article/details/17121195Otsu法是1979年由日本大津提出的.该方法在类间方差最大的情况下是最佳的,即统 ...

  5. hdu 2842(矩阵高速幂+递推)

    题意:一个中国环的游戏,规则是一个木棒上有n个环.第一个环是能够任意放上或拆下的,剩下的环x假设想放上或拆下必须前一个环x-1是放上的且前x-2个环所有是拆下的,问n个环最少多少次操作能够所有拆掉. ...

  6. vim 参数文件配置

    下面是我配置的遇到问题不能修改配置文件时的解决方案 1 /usr/share/vim/vimrc 2 这个是系统型的vimrc配置文件,为了保证vim的正常使用,一般并不会修改这个文件, 而是应该在你 ...

  7. HDU 5384 Danganronpa (2015年多校比赛第8场)

    1.题目描写叙述:点击打开链接 2.解题思路:本题利用字典树解决.本题要求查找全部的B[j]在A[i]中出现的总次数.那么我们能够建立一颗字典树,将全部的B[j]插入字典树,因为一个串的全部字串相当于 ...

  8. linux命令详解:file命令

    前言 file命令可以获取多种文件类型,包括文本文件.脚本文件.源码文件.多媒体文件(音频视频)等.file是通过查看文件的头部内容,来获取文件的类型,而不像Window那样是通过扩展名来确定文件类型 ...

  9. EasyDarwin开源手机直播方案:EasyPusher手机直播推送,EasyDarwin流媒体服务器,EasyPlayer手机播放器

    在不断进行EasyDarwin开源流媒体服务器的功能和性能完善的同时,我们也配套实现了目前在安防和移动互联网行业比较火热的移动端手机直播方案,主要就是我们的 EasyPusher直播推送项目 和 Ea ...

  10. Entity Framework(EF)(一)之database first

    1.EF简介ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.该框架曾经为.NET Framework的 ...