zoukankan      html  css  js  c++  java
  • gulp学习记录

    什么是gulp

    Gupl.js 是一个自动化构建工具.开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js是基于node.js构建的.利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作.gulp中文网

    安装gulp (npm node package manager)

    • 打开cmd,输入npm install --global gulp 这是全局安装,会将gulp安装在你的C:UserscaijiajunAppDataRoaming pm这一目录下.并写入系统环境变量.
    • 输入npm install --save-dev gulp作为项目的开发依赖安装在你的当前目录.
      全局安装可以通过命令在任何地方调用它,本地安装通过require()调用.

    在项目根目录下创建一个gulpfile.js文件,这是gulp的主文件.里面可以定义我们的任务.
    cmd 运行 gulp

    至此,已经成功安装gulp.js.并拥有一个gulpfile.

    gulp的操作都在gulpfile中操作.

    const gulp = require('gulp')
    gulp.task('default',function(){
        gulp.src()
        .pipe(gulp.dest())
    })
    gulp.task('default', ()=>{
      gulp.watch('',[]])
    })
    
    

    gulp API

    • gulp.src 用来匹配,找到我们的文件
    • gulp.dest 指定被gulp处理过的文件存储的位置
    • gulp.task gulp创建任务
    • gulp.watch
    gulp.task('default', ()=>{
      // watch文件可以实时判断文件的变化,当文件变化时,可以去执行指定任务
      // watch内部会监视src下所有的html文件,如果变化,就立即调用 html这个任务
      gulp.watch('./src/*.html',['html'])
    })
    

    gulp 插件

    • gulp-uglify 用于压缩js文件
    gulp.task('script',()=>{
        //src匹配src下所有的js文件
        gulp.src('./src/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist'))    
    })
    
    • gulp-less 用于将less文件转为css
    • gulp-csso 用于压缩css代码
    • gulp-concat 用于合并文件
    gulp.task('style',()=>{
        gulp.src('./src/css/*.css')
            // 合并匹配到的css文件
            .pipe(concat('all.css'))
            // 压缩css
            .pipe(csso())
            // 加前缀
            .pipe(prefixe())
            // 指定合并的文件的保存路径
            .pipe(gulp.dest('./dist'))
        })
        // 把js单独合在一起
        gulp.src('./src/js/*.js')
            .pipe(uglify())
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist'))
        })    
    
    • gulp-antoprefixer 用于css添加前缀,兼容不同浏览器
    • gulp-htmlmin 用于压缩html代码
      gulp.task('minify', function() {
        gulp.src('src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
            //这里写属性,告诉gulp我们要压缩什么
        }))
        .pipe(gulp.dest('dist'));
    });
    collapseWhitespace: true,            //压缩html
    removeComments: true,                //清除html注释
    removeEmptyAttributes: true,         //删除所有空格作为属性值
    removeScriptTypeAttributes: true,    //删除type=text/javascript
    removeStyleLinkTypeAttributes: true, //删除type=text/css
    minifyJS:true,                       //压缩页面js
    minifyCSS:true    // 压缩css
    
    • gulp-sourcemaps 生成一个后缀map的文件,文件表明我们的代码是如何被压缩的
    gulp.task('myjs', () => {
        // 1.匹配文件
        gulp.src('./src/*.js')
        // 2.调用sourcemaps
        .pipe(sourcemaps.init())
        // 3. 压缩代码
        .pipe(uglify())
        // 3.再调用一下sourcemaps,write方法用来指明要生成的map后缀的文件保存到哪里
        .pipe(sourcemaps.write('./'))// 这里./是相对于 './dist'的
        .pipe(gulp.dest('./dist'))
    })
    
  • 相关阅读:
    第四章作业
    第二章上机实验报告
    对二分法的理解和结对编程情况
    Mysql与sql server的列的合并
    C#中如何去除窗体默认的关闭按钮
    C# 实现WinForm窗口最小化到系统托盘代码,并且判断左右鼠标的事件
    running total sql 2012+
    Poqwe Pivot error
    事务
    ssis 导EXCEL ERROR
  • 原文地址:https://www.cnblogs.com/caijunjun/p/6643070.html
Copyright © 2011-2022 走看看