美文网首页
一次Gulp的实践

一次Gulp的实践

作者: E1FANG | 来源:发表于2019-08-28 13:16 被阅读0次

首先先安装好gulp

npm install -g gulp

创建好以下文件


1.png

安装并引入我要使用的插件
sourcmaps 在原始代码定位错误的工具
cssnano css压缩工具

所有使用的插件 都去npm找, 找到合适的 并且 使用人数非常多的成熟插件
npm install --save-dev gulp-cssnano gulp-sourcemaps
// var gulp = require('gulp')
const { src, dest, parallel, watch} = require('gulp')

//css压缩工具
var cssnano = require('gulp-cssnano')

//在原始代码定位错误的工具
var sourcmaps = require('gulp-sourcemaps')


function css() {
    return src('./src/css/**/*.css')
            .pipe(sourcmaps.init())
            .pipe(cssnano())
            .pipe(sourcmaps.write('.'))
            .pipe(dest('./dest'))
}

watch('./src/css/**/*.css', function(){
    console.log('css change')
})

exports.css =css;
exports.default = parallel(css)
写完代码之后 运行 gulp css 就可以看到文件夹发生以下变化 css被打包到了dest里,并且有一个map文件来定位报错
2.png

还运用了一个watch的api 当我们修改相应css文件时,就会执行回调函数


3.png

接下来就可以在html文件里面引入这个打包好的css来使用了

<link rel="stylesheet" href="./dest/a.css">    

//2019-8-27

相关文章

  • 一次Gulp的实践

    首先先安装好gulp 创建好以下文件 安装并引入我要使用的插件sourcmaps 在原始代码定位错误的工具cs...

  • 想要设计gulp & webpack构建系统?看这儿!

    这是前端工程化实践系列的第二篇综合文章,主要内容包括如何设计gulp & webpack构建系统,如何设计gulp...

  • S1-使用gulp

    安装gulp 新建项目 进入项目后,还要把gulp在项目内安装一次 安装gulp-sass 创建gulpfile....

  • npm-npmscript-gulp-webpack

    - npm的使用- 开发node应用- gulp介绍及实践- npm scripts打造前端工作流- webpac...

  • gulp

    gulp gulp.src gulp.dest gulp.task gulp.watch gulp.pipe() ...

  • Gulp配置

    需要用到的插件生产时cnpm install gulp gulp-less 发布时需要打包一次cnpm insta...

  • gulp自动化项目构建

    var gulp = require('gulp');//引用gulp var $ = require('gulp...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp压缩合并文件

    gulp压缩合并文件流程 //引入gulp和gulp插件var gulp = require('gulp');va...

  • gulp讲解

    一、gulp的四个主要的API gulp.src、gulp.pipe、gulp.dest、gulp.watch 二...

网友评论

      本文标题:一次Gulp的实践

      本文链接:https://www.haomeiwen.com/subject/rtuyectx.html