自动化工具之gulp

来源：互联网发布：股票网络投票怎么投编辑：程序博客网时间：2024/05/17 05:59

一、Gulp简介

gulp是一种可以自动化的去完成大量的重复工作的工具

预处理语言的编译(如：sass、less)

js css html压缩混淆

图片的体积优化

二、gulp的安装

安装Node.js(翻墙软件lantern)

安装完成之后可以通过命令行工具node -v

安装nodejs的过程会自动安装npm(node packages manager) npm -v

npm 3以前的版本文件是层级依赖，npm 3以后的依赖是平行依赖

安装gulp(npm install -g gulp)

-g 指的实在全局作用域中安装

测试命令 gulp -v

初始化gulp项目

npm init 添加配置文件

配置json信息

配置gulp的本地依赖包，生成node_modules文件夹

创建任务 gulpfile.js

'use strict';//载入gulp核心包const gulp=require('gulp');//gulp是用来帮助我们执行一些重复操作的//一般我们将这些重复的操作划分为不同的任务//如何定义一个任务//第一个参数书任务名，第二个参数是任务执行体gulp.task('hello',function() {console.log('hello itcast');// 这里编写一些重复性的流程});//让任务运行还是借助命令行// 拷贝文件gulp.task('dest',function() {// 获取文件// gulp。src(['src/**/*.*','src1/**/*.*','!src/demo.html'])gulp.src('src/**/*.*')     // 让文件走向下一个环节.pipe(gulp.dest('dist/'));});// 执行时不添加任务名时。默认执行defaultgulp.task('default',function(){console.log('这是默认任务');// 当src目录下的文件发生变化时，自动执行后面的任务gulp.watch('src/*',['dest']);});// gulp 原生不支持任何的功能，只提供最基础的APIconst less=require('gulp-less');const LessAutoprefix = require('less-plugin-autoprefix');const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });gulp.task('less',function() {gulp.src('src/**/*.less') // 让less转换为CSS gulp-less.pipe(less({             plugins: [autoprefix]          })).pipe(gulp.dest('dist/'));});//监视gulp.task('watch',function() {gulp.watch('src/**/*.less',['less']);})// // 定义一个Http服务器// const connect=require('gulp-connect');// gulp.task('connect',function() {// // 创建一个服务器 默认监听8080端口// connect.server({// root:'public',// livereload:true// });// gulp.watch('public/**/*.*',['reload']);// });// gulp.task('reload',function() {// gulp.src('public/**/*.*')// .pipe(connect.reload());// })

安装插件 npm install gulp-less --save

常见的gulp插件

(1)编译less：gulp-less

(2) 创建本地服务器：gulp-connect

(3)合并文件：gulp-coincat

(4)最小化js文件：gulp-uglify

(5)重命名文件：gulp-rename

(6)最小化css文件：gulp-minify-css

(7)压缩html文件：gulp-minify-html

(8)最小化图像：gulp-imagemin

0 0