gulp構(gòu)建項(xiàng)目步驟
一.gulpfile.js導(dǎo)入和分析
1.添加test.less
2.安裝 less插件
借助于gulp插件實(shí)現(xiàn)less轉(zhuǎn)css的操作。
gulp插件也是基于node.js寫的癣缅， 它的安裝也是使用npm.
安裝完畢后厨剪， 引用插件勘畔。
$ npm install gulp-less --save-dev
Var less = require(‘gulp-less’)
gulp.task(‘任務(wù)名稱’，function(){
Gulp.src(‘./src/style/**/*.less’) //所有的.less文件丽惶。
.pipe(less()) //把上一次獲取的結(jié)果傳遞給less()
.pipe(gulp.dest(‘轉(zhuǎn)完畢之后， 存儲(chǔ)的路徑’));
});
- 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')) //合并完,放到j(luò)s文件夾
.pipe(uglify()) //壓縮文件
.pipe(gulp.dest(path.distPath+'js')) //壓縮完,放到j(luò)s文件夾
});
- 5.常用插件
npm install gulp
gulp-less //編譯Less
gulp-uglify //JS壓縮
gulp-concat //文件合并
gulp-cssmin //css壓縮
gulp-connect //瀏覽器自動(dòng)刷新, 熱更新
gulp-imagemin open --save-dev //壓縮圖片
- 6.導(dǎo)入文件 gulpfile.js, 分析,下載插件
npm install gulp-cssmin gulp-connect gulp-imagemin open --save-dev
- 7.忽略文件
二.gulp 項(xiàng)目構(gòu)建步驟
- 新項(xiàng)目要做的步驟(webApp):
- 1.創(chuàng)建項(xiàng)目,目錄名稱(要和gulpfile.js中一致)
[圖片上傳失敗...(image-dfadf3-1535602368470)]
2.把已經(jīng)寫好的gulpfile.js文件放到項(xiàng)目根目錄中
[圖片上傳失敗...(image-dedc10-1535602368470)]3.創(chuàng)建package.json 文件, 記錄安裝的所有插件
操作:根目錄下,右鍵運(yùn)行g(shù)it
[圖片上傳失敗...(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.運(yùn)行項(xiàng)目 gulp
