gulp构建工具
1.安装
-
1.全局安装glup
// 只需要执行一次 npm install -g gulp -
2.查看安装是否完成
gulp -v
2.任务清单
- src 开发路径
- build 运行路径
- dist 发布路径
1.创建gulpfile.js文件
-
2.在gulpfile.js当中定义任务
// 在引入模块之前需要本地安装 npm install gulp // 1.引入模块 var gulp = require('gulp'); // 2.定义路径 src 开发路径 build运行路径 dist发布路径 var appPath = { // 提前声明好一些常量 src:'src/', build:'build/', dist:'dist/' }; //3.任务清单把所有的src下面的html分别构建到build中和dist中 gulp.task('move',function () { // 1.告诉gulp要操作那些文件 gulp.src(appPath.src + '**/*.html') .pipe(gulp.dest(appPath.build)) .pipe(gulp.dest(appPath.dist)); });
ps: dest()代表需要把src里面的文件放入到那个目录下面
3.执行任务
gulp movea.在命令行中执行 b.在webStrom的命令行中执行4.npm install gulp-less 下载less编译插件
5.npm install gulp-cssmin 下载css压缩插件
6.npm install gulp-concat 下载js合并插件
7.npm install gulp-uglify js压缩插件
-
7.less编译
// less编译 gulp.task('less',function () { gulp.src(appPath.src + 'style/index.less') .pipe(less()) .pipe(gulp.dest(appPath.build + 'css')) .pipe(cssmin()) .pipe(gulp.dest(appPath.dist + 'css')); }); -
8.js压缩
// js压缩 gulp.task('js',function () { gulp.src(appPath.src + '**/*.js') .pipe(concat('index.js')) .pipe(gulp.dest(appPath.build + 'js')) .pipe(uglify()) .pipe(gulp.dest(appPath.dist + 'js')); });
gulp项目构建
- 1.生成package.json文件
npm init -f - 2.上传的时候不需要上传 node_modules文件夹下的所有文件,但是package.json这个文件必须要,如果别人想要插件只需要执行
npm install即可,就会下载所有的相关的插件
