自动化构建工具 gulp的用心得

  • 时间:2018-07-12 22:40 作者:千锋Html5学习课堂 来源:千锋Html5学习课堂 阅读:376
  • 扫一扫,手机访问
摘要:个人了解Gulp是一个构建工具,它的来源是从后台演变而来:buid code ->构建代码 ->构建工具->计算机可以识别的语言从而前台也开始有这个概念:buid code ->js *css *jpg(静态资源文件)->合并 ->压缩当然自动化构建工具不止gulp:列举:1,grunt2,gulp

个人了解Gulp是一个构建工具,它的来源是从后台演变而来:

buid code ->构建代码 ->构建工具->计算机可以识别的语言

从而前台也开始有这个概念:

buid code ->js *css *jpg(静态资源文件)->合并 ->压缩

当然自动化构建工具不止gulp:

列举:

1,grunt

2,gulp

3,webpack

等等...,话说回来还有些公司仍旧使用gulp进行开发。

操作:

1,自动化构建都是基于node环境开发,所以要配置链接:

https://github.com/dk-lan/nodejs/tree/master/module/base

2,打开黑屏控制台:window键 + R

3,当你的环境配置好了以后,创立一个gulpfile.js

4,输入

var gulp = require('gulp')

gulp.task('default', function () {

// 将你的默认的任务代码放在这

console.log('666')

})*/

备注:这是在控制台输出gulp默认运行default,一个页面只可以有一个

5,gulp Api

1),gulp src(url) 路径匹配

gulp.src('./src/*.js') 匹配 src目录下所有 js 文件

gulp.src('src/**/*.js') 匹配 src 目录下所有目录的所有 js

2),gulp.task(name,fn)

gulp.task(‘you’,funtion(){

Console.log(6666)

});

gulp hello 执行任务 hello

gulp.task('default', fn) 定义一个默认任务gulp 执行默认任务

3) gulp.task('default',['one','two','three']);(数组)

一个包含任务列表的数组,这些任务会在你当前任务运行之前完成

gulp.task('one', function (cb) {

console.log(666)

})

gulp.task('two', function () {

// 'one' 完成后

console.log(7777)

})

// 一个包含任务列表的数组,这些任务会在你当前任务运行之前完成

gulp.task('default', ['one', 'two'])

*/

4),gulp.watch(path, fn) 监听路径下文件变化

gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }); //event.type 发生的变动的类型:added, changed 或者者 deleted //event.path 触发了该事件的文件的路径

5),gulp.run()表示要执行的任务。

可可以会用单个参数的形式传递多个任务

gulp.task('end',function(){ gulp.run('task1','task3','task2'); });

注意:任务是尽可可以多的并行执行的,并且可可以不会按照指定的顺序运行。

6),gulp.dest()方法是使用来写文件的,

其语法为gulp.dest(path[,options])

var gulp = require('gulp');

gulp.src('./scr/*.js') // 获取路径

.pipe(gulp.dest('dist/foo.js')); // 写入并放入文件

7),开启本地服务 gulp-connect

安装 gulp-connect npm install gulp-connect --save-dev

定义任务

var gulp = require('gulp');

var connect = require('gulp-connect');

gulp.task('myServer', function() { connect.server({

root: 'app',//服务启动的根目录

port: 8000,//端口

livereload: true//为true时gulp会自动检测文件的变化而后自动进行源码构建

}); });

8),压缩 js gulp-uglify

安装 gulp-uglify npm install gulp-uglify --save-dev

定义任务

var gulp = require('gulp');

var uglisy = require('gulp-uglify');

gulp.task('jscompress', function () {

// 1. 找到文件

// return gulp.src('./Gulp/**/*.js')

// 2. 压缩文件

.pipe(uglify())

// 3. 另存压缩后的文件

.pipe(gulp.dest('mins'))

})

监听

自动化构建工具 gulp的用心得

设置默认任务(即命令行中输入gulp执行的任务)

gulp.task('default', ['name','name']);

9),压缩CSS gulp-clean-css

安装板块 npm install gulp-clean-css --save-dev

操作与->js压缩一样

10),重命名文件 gulp-rename

安装板块 npm install gulp-rename --save-dev

自动化构建工具 gulp的用心得

11),编译 sass

安装板块 npm install gulp-sass --save-dev

var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass111', function(){ return gulp.src('app/scss/index.scss') .pipe(sass()) .pipe(gulp.dest('app/css')) });

来源:千锋HTML5

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部