美文网首页
Gulp学习

Gulp学习

作者: 我才不是稻草人 | 来源:发表于2017-09-11 14:23 被阅读0次

postcss使用笔记

安装

npm i -g postcss-cli

使用

npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build
//  或
postcss --use autoprefixer --dir dist/ src/*.css --watch

jshint

安装

npm install -g jshint

使用

jshint filename.js

建立配置文件 .jshintrc

{
  "asi" : true,  //自动加分号
  "esversion": 6  //可用es6
}

ESlint

安装

npm i -g eslint

使用

eslint --init  //建立配置文件
eslint filename.js

配置全局变量识别$

// .eslintrc.js
module.exports = {
  "env": {
    "browser": true,
    "jquery": true
  },
  "globals": {
    
  },
  "rules": {
    "semi": "off",  //禁用分号错误提示
  }
}

文件压缩

uglifyjs (只能压缩es5不能压缩es6)
安装

npm install -g uglify-js

使用

uglifyjs --compress --mangle -- fliename.js

babel

安装

npm install --save-dev babel-cli babel-preset-env

创建配置文件

touch .babelrc

写入

{
  "presets": ["env"]
}

使用

babel filename.js > dist/filename.js

// 第二种方法连着使用uglifyjs
babel filename.js | uglifyjs > dist/filename.js

Gulp

作为项目的开发依赖安装:

npm install --save-dev gulp

创建配置文件

touch gulpfile.js

使用装在项目里的gulp(非全局安装的情况):

./node_modules/.bin/gulp
var gulp = require('gulp');
var del = require('del');
gulp.tash("default", function(){
  return del(['dist/*']);
});

在gulp中使用postcss

npm install --save-dev gulp-postcss

相关文章

  • gulp学习(二)-api

    学习gulp的用法,首先得学习下gulp的几个常用的api task 源码: Gulp继承Orchestrator...

  • Gulp学习

    参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...

  • 前端自动化工具--gulp常用插件(一)

    学习网站:http://www.vuexx.com/ gulp常用方法 #引入gulp模块 var gulp = ...

  • gulp4.0版入门及常用插件,gulp创建前端项目

    本篇为gulp学习笔记。 gulp安装及创建前端项目 1,先安装node,npm,cnpm 2,全局安装gulp脚...

  • #gulp#gulp学习

    怎样安装jshint插件? 先执行 cnpm install --save-dev jshint gulp-jsh...

  • gulp学习(三)-实战

    参考 i5tingbook gulp-book 前面两节学习到gulp的基本知识,也知道gulp可以进行压缩,监控...

  • gulp.js 的使用

    什么是 gulp.js gulp.js - 基于流的自动化构建工具。gulp.js 的 API 简单,学习成本低;...

  • 快速解决:gulp did you forget to sign

    今天用学习用到了gulp 安装的gulp 4.0版本 代码跟老师一样但是就是不行 提示以下错误: gulp did...

  • Gulp学习

    postcss使用笔记 安装 使用 jshint 安装 使用 建立配置文件 .jshintrc ESlint 安装...

  • gulp学习

    Gulp API主要包括4个顶级函数。如下 gulp.task(name, deps, fn)定义任务 gulp....

网友评论

      本文标题:Gulp学习

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