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