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

創(chuàng)建配置文件

touch .babelrc

寫入

{
  "presets": ["env"]
}

使用

babel filename.js > dist/filename.js

// 第二種方法連著使用uglifyjs
babel filename.js | uglifyjs > dist/filename.js

Gulp

作為項目的開發(fā)依賴安裝:

npm install --save-dev gulp

創(chuàng)建配置文件

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