Gulp学习

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