码迷,mamicode.com
首页 > 其他好文 > 详细

前端随心记---------gulp管理工具

时间:2019-10-17 01:36:40      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:令行   name   ref   div   UNC   安装   code   package   环境   

GULP

什么是guip?
1.用自动化构建工具增强你的工作流程!
2.gulp是一个工具包,它可以帮助我们解决在开发过程中遇到痛苦或者耗时的任务。避免出现低级错误。
3.特点:
易于使用
构建快速
插件高质
易于学习

 

Gulp的环境配置

1.安装nodejs(依赖nondejs)
2.全局安装gulp-cli -g
3.创建package.json
4.局部安装gulp --save-dev
5.创建gulpfile.js
6.命令行执行gulp+“任务名”命令

gulp插件
1.gulp-concat 连接js
2.gulp-uglify 压缩js
3.gulp-sass 编译sass
4.gulp-minify-css 最小化css
5.gulp-rename 文件重命名
6.gulp-connect 热更新
7.gulp-plumber 错误处理

8.gulp.watch   监控文件

var gulp = require(‘gulp‘);

//创建gulp任务,
//第一个参数为任务名称,
//第二个参数为任务所依赖的其他任务(可省略),
//第三个是要执行任务所运行的代码
gulp.task(‘copy-index‘,function(){
    gulp.src(‘./index.html‘)//取到指定文件
    .pipe(gulp.dest(‘./dist‘)) //管道连接,拷贝文件到dist,

});

gulp.task(‘copy-index‘,function(){
    gulp.src(‘./*.html‘)//取到所有以.html文件
    .pipe(gulp.dest(‘./dist‘)) //管道连接,拷贝文件到dist,

});

gulp.task(‘copy-index‘,function(){
    gulp.src(‘./**/*‘)//取到文件下面文件夹下的所有文件
    .pipe(gulp.dest(‘./dist‘)) //管道连接,拷贝文件到dist,

});

gulp.task(‘copy‘,[‘‘,‘‘,‘‘])

  gulp.task(,function(){
    gulp.watch(‘‘),[])
  })

 

 

中文文档:https://www.gulpjs.com.cn/docs/getting-started/quick-start/

 

前端随心记---------gulp管理工具

标签:令行   name   ref   div   UNC   安装   code   package   环境   

原文地址:https://www.cnblogs.com/hudunyu/p/11689555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!