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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,576评论 1 17
  • P1 简介 gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascript/coffee/s...
    淡就加点盐阅读 739评论 1 7
  • gulp作为前端构建项目的一个工具,自己理解gulp主要方面的作用:1.构建本地服务器。2.快速构建项目。3.对代...
    张宪宇阅读 1,225评论 0 2
  • 怎样安装jshint插件? 先执行 cnpm install --save-dev jshint gulp-jsh...
    Miya_hope阅读 415评论 0 0
  • 安装 Gulp.js Gulp 是基于 Node.js 的,故要首先安装 Node.js,完成之后执行下面的命令安...
    船长酱阅读 351评论 0 0