Gulp简单应用

Posted 2020-08-19

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