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即可

时间: 2024-10-11 11:22:37

Gulp简单应用的相关文章

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

一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率 gulp的优点:基于流的操作.任务化. 常用api:src .dest.watch.task.pipe 由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装(cnpm i -g gulp) 常用的gulp需要安装的包括gulp-cl

Gulp 简单的开发环境搭建

//获取gulp //require()是 node (CommonJS)中获取模块的语法 var gulp=require('gulp'); //获取gulp-concat模块(用于合并文件):npm install --save-dev gulp-concat var concat=require('gulp-concat'); //获取gulp-jshint(语法检查):npm install jshint var jshint=require('gulp-jshint'); //获取gu

vue + webpack + gulp 简单环境 搭建

一.物料准备 废话不多说,直接上 package.json { "name": "vwp", "version": "1.0.0", "description": "vue test", "main": "index.js", "dependencies": { "vue": "^1.0.26&qu

gulp简单使用

公司项目需要优化,前端方面只要就是资源整合.拿另一个小项目试验: gulpfile.js /** * Created by AAA on 2017/9/28. */ var gulp = require('gulp'); var del = require('del'); var autoprefixer = require('gulp-autoprefixer'); var uglify = require('gulp-uglify'); var cssmin = require('gulp-

Gulp简单介绍

Gulp 介绍 自动化构建工具,可以通过gulp对我们的代码进行全自动的编译.可以实现代码的自动压缩.编译.实时监测等功能. 特点 任务化 基于流(数据流io:input/output)操作 整个操作都是基于数据流进行操作 具备属于gulp的内存,所有的操作全部在gulp的内存当中 对应着输入流和输出流.会将数据通过src方法输入,通过dest方法输出. 简易的API 官网网站:https://gulpjs.com/ 中文网:https://www.gulpjs.com.cn/ 插件中心:htt

Gulp.js----比Grunt更易用的前端构建工具

Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁). 用插件做一些本来不需要插件来做的事情.因为

Local gulp not found in.. on windows

当出现报错时,请按如下方式安装 gulp 以下使用国内的淘宝镜像安装: 1 $ # Step 1 2 $ cnpm install -g gulp 3 $ # Step 2 4 $ cnpm install --save-dev gulp 5 $ # ... 安装后,就不报错了. 参考文章: http://blog.dwaynecrooks.com/post/110903139442/why-do-we-need-to-install-gulp-globally-and gulp简单入门推荐[g

一篇迟到的gulp文章

前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gulp的时候比较晚,16年的时候才听说有这么个玩意,正真用它是在17年的时候,但是虽然现在webpack已经大行其道,我们每个人都 在积极去拥抱它,不过gulp在现在来说也并不是一无是处,还是有用到的地方,所以,这篇文章我觉得还有有必要写的,就当做是为gulp写的最后一篇文章吧 ,做技术就是 这么辛苦,

实用的Npm插件(软件)

1.http-server (简单搭建http服务器) 2.cssnano (css多功能优化工具) PS:比uncss功能更全. 3.Prepack (Js专业优化工具) 4.Gulp (简单的前端自动化构建工具) PS:Gulp插件 gulp-html-replace (将多个css与js外链合并) gulp-concat-css (将多个@importd的css合并) easy-beautify (格式化JavaScript,HTML和CSS) gulp-clean-css (压缩css)