zoukankan      html  css  js  c++  java
  • gulp入门代码

    /*
    gulp学习之路:
    
    问题一:
    	*在gulp中用法
    问题二:
    	gulpfile.js 可以分享给朋友,而且他只需要执行【npm install】
    
    */
    var gulp = require('gulp');
    var uglify = require('gulp-uglify');
    var minifycss= require('gulp-minify-css');
    var imagemin = require('gulp-imagemin');
    var less = require('gulp-less');
    var autoprefixer = require('gulp-autoprefixer')
    var gutil = require('gulp-util')
    var watchPath = require('gulp-watch-path')
    var combiner = require('stream-combiner2')
    
    var handleError = function (err) {
        var colors = gutil.colors;
        console.log('
    ')
        gutil.log(colors.red('Error!'))
        gutil.log('fileName: ' + colors.red(err.fileName))
        gutil.log('lineNumber: ' + colors.red(err.lineNumber))
        gutil.log('message: ' + err.message)
        gutil.log('plugin: ' + colors.yellow(err.plugin))
    }
    gulp.task('watchjs', function () {
        gulp.watch('ori/js/**/*.js', function (event) {
            var paths = watchPath(event, 'ori/', 'dist/')
            /*
            paths
                { srcPath: 'ori/js/log.js',
                  srcDir: 'ori/js/',
                  distPath: 'dist/js/log.js',
                  distDir: 'dist/js/',
                  srcFilename: 'log.js',
                  distFilename: 'log.js' }
            */
            gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
            gutil.log('Dist ' + paths.distPath)
    
            var combined = combiner.obj([
                gulp.src(paths.srcPath),
                uglify(),
                gulp.dest(paths.distDir)
            ])
    
            combined.on('error', handleError)
        })
    })
    gulp.task('script', function() {
      // 将你的默认的任务代码放在这
      gulp.src('ori/js/*.js')
      	  .pipe(uglify())
      	  .pipe(gulp.dest('dist/js'))
    });
    
    gulp.task('css',function(){
    	gulp.src('ori/css/*.css')
    		.pipe(autoprefixer({
                  browsers: 'last 2 versions'
                }))
    		.pipe(minifycss())
    		.pipe(gulp.dest('dist/css'))
    });
    
    gulp.task('image',function(){
    	gulp.src('ori/img/*.*')
    		.pipe(imagemin({
    			progressive:true
    		}))
    		.pipe(gulp.dest('dist/img'))
    });
    
    gulp.task('less',function(){
    	gulp.src('ori/less/**.less')
    		.pipe(less())
    		.pipe(autoprefixer({
                  browsers: 'last 2 versions'
                }))
    		.pipe(minifycss())
    		.pipe(gulp.dest('dist/css'))
    });
    
    gulp.task('auto',function(){
    	gulp.watch('ori/js/*.js', ['script']);
    	gulp.watch('ori/css/*.css',['css']);
    	gulp.watch('ori/img/*.*',['image']);
    	gulp.watch('ori/less/**.less',['less'])
    });
    
    gulp.task('default',['script','auto','css','image','less','watchjs']);
    

      

  • 相关阅读:
    Docker笔记(三):Docker安装与配置
    Docker笔记(二):Docker管理的对象
    Docker笔记(一):什么是Docker
    ubuntu18.04上搭建KVM虚拟机环境超完整过程
    软件项目研发流程该怎么规范
    线程池的基本原理,看完就懂了
    Spring Boot2从入门到实战:统一异常处理
    redission-tomcat:快速实现从单机部署到多机部署
    4. matlab入门——函数、绘图基础
    3. matlab入门——控制结构、选择结构、循环结构、错误控制
  • 原文地址:https://www.cnblogs.com/cao-zhen/p/8949567.html
Copyright © 2011-2022 走看看