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
