首页 > 代码库 > gulp相关
gulp相关
‘use strict‘;var gulp = require(‘gulp‘), webserver = require(‘gulp-webserver‘), //gulp服务器 connect = require(‘gulp-connect‘), //创建本地服务器 sass = require(‘gulp-sass‘), //sass编译器 less = require(‘gulp-less‘), //less编译器 uglify = require(‘gulp-uglify‘), //最小化js文件 cssmin = require(‘gulp-minify-css‘), //最小化css文件 imagemin = require(‘gulp-imagemin‘), //最小化图片 browserSync = require(‘browser-sync‘).create(), //实时自动刷新,支持多种设备 livereload = require(‘gulp-livereload‘), //网页自动刷新,浏览器中还需安装插件,使用不便 autoprefixer = require(‘gulp-autoprefixer‘),//自动补全浏览器兼容的css concat = require(‘gulp-concat‘), //文件合并,并且带版本后缀,以清除页面缓存 clean = require(‘gulp-clean‘), //文件清理,将不需要的文件清除掉 zip = require(‘gulp-zip‘), //自动打包并按时间重命名 sourcemaps = require(‘gulp-sourcemaps‘), //资源map记录 plumber = require(‘gulp-plumber‘), //任务错误中断自动重传var root = { web: ‘web/‘,} // 启动服务器gulp.task(‘webserver‘, function() { // 打开网站页面 gulp.src(root[‘web‘]) .pipe(webserver({ host: ‘0.0.0.0‘, port: 8000, directoryListing: { enable:true, path: root[‘web‘] } }) );});// less解析gulp.task(‘less‘, function(){ //编译src目录下的所有less文件 //除了reset.less和test.less(**匹配src/less的0个或多个子文件夹) // gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) gulp.src(‘web/less/*.less‘) // 开启sourcemap .pipe(sourcemaps.init()) .pipe(less()) //将编译后的css压缩, //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘})) .pipe(cssmin()) // 生成写入sourcemap文件 .pipe(sourcemaps.write()) .pipe(gulp.dest(‘web/css‘));});// 监听事件,可单独监听部分代码,也可以全部监听gulp.task(‘watch‘, function(){ // 当所有less文件发生改变时,调用less任务 // gulp.watch(‘web/**/*.less‘,[‘less‘]); // 监听很多的文件 gulp.watch([‘web/**/*.*‘], [‘html‘,‘less‘,‘js‘,‘jpg‘,‘png‘,‘gif‘]);});// gulp-connect插件:实时刷新gulp.task(‘connect‘, function(){ connect.server({ root:‘web‘, livereload:true //开启实时刷新 });});gulp.task(‘default‘, [‘webserver‘,‘watchLess‘,‘connect‘]);// gulp.task(‘default‘, function() {// // 将需要的放到基本加载项里面// gulp.start(‘webserver‘);// gulp.start(‘watchLess‘);// });
tip:
单独执行某个gulp都是直接 gulp 启动项名称
例如监听事件,我的gulp任务名称为watchLess,所以命令为gulp watchLess
关于package.json文件里面的配置
没必要每次自己手动的添加,npm某个package的时候直接命令行,下载完毕会自动添加
比如下载gulp-less,命令:cnpm install gulp-less --save-dev
gulpfile常用的配置
gulp-webserver 服务器启动项
gulp-less less启动项
gulp-sass sass启动项,天生自带压缩特效
gulp-minify-css 将编译后的css压缩(直接在原有的less配置里面添加就好了.pipe(cssmin()))
gulp-sourcemaps 用于生成less与css编译时的引入关系,方便日后查找修改
gulp-uglify 用于压缩js
gulp-imagemin 用于压缩图片,包括jpg,png,gif
gulp相关
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。