gulp构建项目步骤
一.gulpfile.js导入和分析
1.添加test.less
2.安装 less插件
借助于gulp插件实现less转css的操作。
gulp插件也是基于node.js写的， 它的安装也是使用npm.
安装完毕后， 引用插件。
$ npm install gulp-less --save-dev
Var less = require(‘gulp-less’)
gulp.task(‘任务名称’，function(){
Gulp.src(‘./src/style/**/*.less’) //所有的.less文件。
.pipe(less()) //把上一次获取的结果传递给less()
.pipe(gulp.dest(‘转完毕之后， 存储的路径’));
});
- 3.gulp-uglify
- 文件压缩插件
$ npm install gulp-uglify --save-dev
- 4.gulp-concat
- 文件合并插件
$ npm install gulp-concat --save-dev
gulp.task('js', function () {
gulp.src(path.src+'js/**/*.js') //操作js文件夹下所有js文件
.pipe(concat('index.js')) //合并新生成文件 index.js
.pipe(gulp.dest(path.buildPath+'js')) //合并完,放到js文件夹
.pipe(uglify()) //压缩文件
.pipe(gulp.dest(path.distPath+'js')) //压缩完,放到js文件夹
});
- 5.常用插件
npm install gulp
gulp-less //编译Less
gulp-uglify //JS压缩
gulp-concat //文件合并
gulp-cssmin //css压缩
gulp-connect //浏览器自动刷新, 热更新
gulp-imagemin open --save-dev //压缩图片
- 6.导入文件 gulpfile.js, 分析,下载插件
npm install gulp-cssmin gulp-connect gulp-imagemin open --save-dev
- 7.忽略文件
二.gulp 项目构建步骤
- 新项目要做的步骤(webApp):
- 1.创建项目,目录名称(要和gulpfile.js中一致)
[图片上传失败...(image-dfadf3-1535602368470)]
2.把已经写好的gulpfile.js文件放到项目根目录中
[图片上传失败...(image-dedc10-1535602368470)]3.创建package.json 文件, 记录安装的所有插件
操作:根目录下,右键运行git
[图片上传失败...(image-d6172-1535602368470)]4.下载gulp所需要的插件
npm install gulp gulp-less gulp-cssmin gulp-concat gulp-connect gulp-uglify gulp-imagemin open --save-dev --registry=https://registry.npm.taobao.org
- 5.运行项目 gulp
