gulp 学习

gulp 学习_第1张图片

可以使用gulp-clil 脚手架生成目录

gulp 学习_第2张图片

 

安装使用gulp3.9.1版本

 

Gulp 4新的任务执行体系:https://segmentfault.com/a/1190000017571288?utm_source=tag-newest

gulp 学习_第3张图片

 

gulp 学习_第4张图片

 

 

gulp 学习_第5张图片gulp 学习_第6张图片

 

 

查找全部js文件的方法

gulp.src(‘src/js/**/*.js’)

可查找在src/js目录下js文件以及子目录的js文件

 

 

使用gulp,安装插件后合并 js 文件到 指定目录

 

 

 

在npm 上下载插件

 

插件下载好以后再package.json 文件中查看插件。

gulp 学习_第7张图片

 

在gulpfile.js文件中首先引入插件,作为函数名来调用以此实现功能。

gulp 学习_第8张图片

 

 

自定义任务中使用 插件函数 进行合并js文件操作 并输出到指定文件夹,使用命令执行任务,完成合并,目录自动更新

gulp 学习_第9张图片

 

 

查看新生成的js合并文件

gulp 学习_第10张图片

 

使用管道pipe函数+插件函数,将合并后的js文件 进行进一步的压缩以及重命名,生成.min.js文件

gulp 学习_第11张图片

使用gulp处理css文件

 

创建css 文件和less文件,并使用 npm 下载 gulp 的css 文件,less文件 处理插件

gulp 学习_第12张图片

 

查看下载好的 插件

gulp 学习_第13张图片

 

引入新的css,less插件

gulp 学习_第14张图片

 

注册转换less 的任务,并将less转换的css文件输出到 css文件夹下(未重命名的情况下,将会保持原less文件的文件名,只将less文件类型改成css文件)

gulp 学习_第15张图片

 

合并css文件,注意,由于gulp中使用return 写法 ,则其任务的执行顺序是异步的,如果less需要编译的文件较多,而css文件合并的任务量很少的话,两个任务同时开启,则当css文件合并完成时,还有less文件未编译完成,会导致css文件合并的不完整,为了保证合并css文件任务前,less文件全部转换成css文件,可以在css任务中添加一个数组,其中填写当前任务所依赖的任务,可以确保在less任务全部完成后再启动css文件合并的任务。(注意,这种写法在gulp4版本以上已修改,具体请看官方文档)

gulp 学习_第16张图片

 

default中添加任务,使用 gulp  命令自动执行自定义任务

gulp 学习_第17张图片

处理html文件

gulp 学习_第18张图片

 

gulp 学习_第19张图片

 

其中 htmlmin 插件函数需要传入参数  collapseWhitespace  清除空白间距,即压缩html文件中。(注意,压缩后的html文件 其中引入的css文件,js文件的相对路径还是原来html文件的相对路径,所以在html源文件中引入外部资源文件,需要考虑压缩后的html文件查找资源文件的相对路径)

gulp 学习_第20张图片

 

gulp的实时更新(启动之后,修改原文件后自动调用gulp执行相应的任务,我们只需在浏览器中刷新即可)

gulp 学习_第21张图片

gulp 学习_第22张图片

 

使用gulp.watch来监听文件的变化以此执行相应的任务,在监听了less文件和css文件之后只需执行css任务,因为在上面我们对css任务添加了依赖,需要等less任务完成后才可执行css任务,因此在监听中不需要再添加执行less任务

gulp 学习_第23张图片

 

最后给每个需要实时更新的任务后面加上一个绑定函数的语句即可

gulp 学习_第24张图片

 

不建议watch任务添加到默认任务中,watch监听只是方便我们在开发中更有效率。直接gulp watch 启动监听任务即可

 

gulp热加载的插件(修改文件后自动更新并自动刷新浏览器页面)

gulp 学习_第25张图片

 

 

gulp 学习_第26张图片

 

引入插件

 

gulp 学习_第27张图片

 

向上个插件一样,给每个任务下面添加一条执行热加载的语句

gulp 学习_第28张图片

 

文件目录

gulp 学习_第29张图片

源码文件  

gulpfile.js

var gulp = require('gulp'); //引入gulp
var concat = require('gulp-concat'); //js文件合并
var uglify = require('gulp-uglify'); //js文件压缩
var rename = require('gulp-rename'); //文件重命名
var cleanCss = require('gulp-clean-css'); //合并css文件
var less = require('gulp-less'); //编译less文件
var htmlmin = require('gulp-htmlmin'); //压缩html文件
var livereload = require('gulp-livereload'); //自动执行任务
var connect = require('gulp-connect'); //热加载插件

//自定义任务
gulp.task('cwh_js', function() { //使用 .pipe 管道函数  链式执行  插件函数的操作
    return gulp.src('src/js/*.js') // 找到目标源文件
        .pipe(concat('bundle.js')) //合并两个js文件到bundle.js文件
        .pipe(gulp.dest('dist/js/')) //生成文件到目标文件夹
        .pipe(uglify()) //压缩
        // .pipe(rename({ suffix: '.min' })) //重命名
        .pipe(rename('bundle.min.js'))
        .pipe(gulp.dest('dist/js/')) //生成文件到目标文件夹
        .pipe(livereload()) //绑定更新文件的函数,实时刷新
        .pipe(connect.reload()) //热加载的实时刷新
});

//编译less文件
gulp.task('cwh_less', function() {
    return gulp.src('src/css/*.less') //选择less文件
        .pipe(less()) //编译less文件
        .pipe(gulp.dest('src/css/')) //输出编译后的css文件

});

//压缩html文件
gulp.task('cwh_htmlmin', function() {
    return gulp.src('index.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist/'))
});

//注册监听任务
gulp.task('watch', ['default'], function() {
    livereload.listen(); //启动监听
    gulp.watch('src/js/*.js', ['cwh_js']); //监听js文件的变动并调用相应的任务
})

gulp.task('cwh_server', ['default'], function() {
    connect.server({
        root: 'dist/',
        livereload: true, //实时刷新
        port: 5000
    })
    gulp.watch('src/js/*.js', ['cwh_js']); //监听js文件的变动并调用相应的任务
});


gulp.task('default', ['cwh_js', 'cwh_less']); //默认任务

 

package.json

{
    "name": "gulp_study",
    "version": "1.0.0",
    "dependencies": {},
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-clean-css": "^4.2.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.7.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-less": "^4.0.1",
        "gulp-livereload": "^4.0.1",
        "gulp-rename": "^1.4.0",
        "gulp-uglify": "^3.0.2"
    }
}

 

你可能感兴趣的:(gulp)