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'))
    })
    
  • 相关阅读:
    【转】How Google Glass Actually Works
    【转】苹果、微软、Google的下一战:未来智能眼镜
    【转】硅谷创业教父Paul Graham:如何获得创业idea (1)
    【转】解读专利文件:下一代Google Glass将更像“正常”眼镜,通过镜片显示画面
    【转】苹果只是现在,Google才是未来
    【Coding】程序员每天该做的事 ,收藏着
    【Coding】Enterprise Architect 7.0入门教程
    【Linux】Ubuntu下Java编程环境的搭建
    WebPart开发知识 (转)
    用于 SharePoint 开发的 Visual Studio 2010 工具 (转)
  • 原文地址:https://www.cnblogs.com/caijunjun/p/6643070.html
Copyright © 2011-2022 走看看