gulp安装

2019-03-16  本文已影响0人  Wo信你个鬼

最终教程请看下面网站

http://mybook.bluej.cn/gulp/docs/#/

第一步:全局安装 gulp:

npm install --global gulp

第二步: 在项目根目录下创建一个名为 gulpfile.js 的文件:

1.png
2.png
3.png

npm init

第三步:本地安装 :

4.png

npm install gulp --save-dev

第四步:压缩:

npm install gulp-htmlmin --save-dev

1.然后在项目目录下新建一个gulpfile.js ,再新建src目录,在src里面新建html,再拉index.html进入html目录中
2.在src里面新建css,再拉index.css进入目录中

gulpfile.js里面的代码

//引入gulp
const {src,dest,parallel} = require ("gulp");
//引入压缩HTML的插件
const minhtml = require("gulp-htmlmin");

//定义压缩HTML的函数
function minHtml(){
    return src("src/html/index.html")
      .pipe(minhtml({collapseWhitespace:true}))
      .pipe(dest("dist/html"))
}
//定义压缩命令
exports.build = parallel(minHtml);

第五步:打包:

5.png

gulp build

CSS

第一步:安装Css:


6.png

npm install gulp-clean-css --save-dev

第一步:安装js:

7.png

npm install gulp-uglify --save-dev

转换es6:

8.png

npm install gulp-babel@7 --save-dev
npm install babel-preset-env --save-dev
npm install babel-core --save-dev

上一篇下一篇

猜你喜欢

热点阅读