码迷,mamicode.com
首页 > 其他好文 > 详细

Gulp简单应用

时间:2016-11-12 11:53:11      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:files   gif   pen   --   技术   tor   cnp   const   hid   

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"]);
View Code

 

4.在命令行输入 gulp ,自动生成上述代码中的  build  文件夹(包括inde.html,index.js,index-min.js)

5.运行在build文件夹中的index.html即可

 

Gulp简单应用

标签:files   gif   pen   --   技术   tor   cnp   const   hid   

原文地址:http://www.cnblogs.com/libo142/p/6056295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!