首页 > 代码库 > gulp使用
gulp使用
gulpfile.js:从开发到生产,功能有:压缩合并、添加版本号
var gulp = require(‘gulp‘), //引入gulp核心文件包 concat = require(‘gulp-concat‘), //- 多个文件合并为一个 minifyCss = require(‘gulp-minify-css‘), //- 压缩CSS为一行 rev = require(‘gulp-rev‘), //- 对文件名加MD5后缀 revCollector = require(‘gulp-rev-collector‘), //- 路径替换 cleanCSS = require(‘gulp-clean-css‘), //清除css uglify = require(‘gulp-uglify‘), //- 压缩js为一行 rename = require(‘gulp-rename‘), //重命名 jshint=require(‘gulp-jshint‘), //js语法检查 htmlmin = require(‘gulp-htmlmin‘), //html压缩 connect = require(‘gulp-connect‘), //服务器包 less = require(‘gulp-less‘); path = require(‘path‘), domSrc = require(‘gulp-dom-src‘), cheerio = require(‘gulp-cheerio‘), gulpSequence = require(‘gulp-sequence‘), imagemin = require(‘gulp-imagemin‘),//图片压缩 notify = require(‘gulp-notify‘), pngcrush = require(‘imagemin-pngcrush‘), runSequence = require(‘run-sequence‘), del = require(‘del‘);//[开发使用]// 将less文件编译为css文件gulp.task(‘less‘,function(){ gulp.src(‘app/less/*.less‘) .pipe(less()) .pipe(gulp.dest(‘app/css‘));})//监督任务一:less文件改变更新css文件gulp.task(‘changeLess‘,function(){ gulp.watch(‘app/**/*.less‘,[‘less‘]);})//开启服务器,并监听实时更新文件gulp.task(‘serve‘,function(){ connect.server({ root:‘app‘, livereload:true }); gulp.watch(‘app/**/*.*‘,[‘reload‘,‘changeLess‘]);})//监督任务二:自动更新gulp.task(‘reload‘,function(){ gulp.src(‘app/**/*.*‘) .pipe(connect.reload());});//[生产使用]//压缩,合并css 到对应目录下gulp.task(‘minifycss‘, function() { return gulp.src(‘app/css/*.css‘) //需要操作的文件 .pipe(concat(‘main.css‘)) //合并所有css到main.css .pipe(gulp.dest(‘app/css‘)) //输出到文件夹 .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 .pipe(cleanCSS({compatibility: ‘ie7‘})) //执行压缩 .pipe(gulp.dest(‘dist/css‘)); //输出文件夹});//压缩,合并 js到对应目录下gulp.task(‘minifyjs‘, function() { return gulp.src(‘app/js/*.js‘) //需要操作的文件 .pipe(concat(‘main.js‘)) //合并所有js到main.js .pipe(gulp.dest(‘app/js‘)) //输出到文件夹 .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest(‘dist/js‘)); //输出});//压缩html到对应目录下gulp.task(‘minifyhtml‘, function() { return gulp.src(‘app/*.html‘) .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest(‘dist‘));});//压缩img 到对应目录下gulp.task(‘minifyimg‘, function() { return gulp.src(‘app/images/*‘) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngcrush()] })) .pipe(gulp.dest(‘dist/images/‘)); });//更改生产文件下引入css和js链接gulp.task(‘newindex‘, function() { return gulp.src(‘dist/index.html‘) .pipe(cheerio(function ($) { $(‘script‘).remove(); $(‘link‘).remove(); $(‘body‘).append(‘<script src="http://www.mamicode.com/js/main.min.js"></script>‘); $(‘head‘).append(‘<link rel="stylesheet" href="http://www.mamicode.com/css/main.min.css">‘); })) .pipe(gulp.dest(‘dist/‘));});//一次性执行多个任务gulp.task(‘allmini‘,[‘minifycss‘,‘minifyjs‘,‘minifyhtml‘,‘minifyimg‘]);//生产时只需要执行这一个任务‘product‘gulp.task(‘product‘,gulpSequence(‘allmini‘,‘newindex‘));//生产使用基础上添加版本 //定义css、js源文件路径var cssSrc = http://www.mamicode.com/‘dist/css/*.css‘, jsSrc = ‘dist/js/*.js‘;//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task(‘revCss‘, function(){ return gulp.src(cssSrc) .pipe(rev()) .pipe(gulp.dest(‘view/css‘)) .pipe(rev.manifest()) .pipe(gulp.dest(‘rev/css‘));});//js生成文件hash编码并生成 rev-manifest.json文件名对照映射gulp.task(‘revJs‘, function(){ return gulp.src(jsSrc) .pipe(rev()) .pipe(gulp.dest(‘view/js‘)) .pipe(rev.manifest()) .pipe(gulp.dest(‘rev/js‘));});//Html替换css、js文件版本gulp.task(‘revHtml‘, function () { return gulp.src([‘rev/**/*.json‘, ‘dist/*.html‘]) .pipe(revCollector()) .pipe(gulp.dest(‘view‘)) .pipe(notify({ message: ‘all task ok‘ }));});//加版本gulp.task(‘dev‘, function (done) { runSequence( [‘revCss‘], [‘revJs‘], [‘revHtml‘] );});//开发之前清除文件gulp.task(‘clean‘, function (cb) { del([ // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西 ‘dist/**/*‘, ‘view/**/*‘, ‘rev/*‘, // 我们不希望删掉这个文件,所以我们取反这个匹配模式 ], cb);});//任务排序打包gulp.task(‘default‘, function (done) { runSequence( [‘product‘], [‘dev‘] );});
gulp使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。