前端开发工具集

[bingoogolapple]

gulp

npm install -g gulp-cli
npm init
npm install gulp --save-dev

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function() {
  console.log('Hello Gulp!');
});
// gulp  默认执行default这个任务
gulp.task('default', ['hello']);

gulp.task('copyIndex', function() {
  return gulp.src('index.html').pipe(gulp.dest('dist'));
});
gulp.task('copyImages', function() {
  // return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
  // return gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'));
  return gulp.src('images/**/*.{jpg,png}').pipe(gulp.dest('dist/images'));
});
gulp.task('copyFiles', function() {
  // !表示排除
  return gulp.src(['xml/*.xml', 'json/*.json', '!json/secret-*.json']).pipe(gulp.dest('dist/data'));
});
// 其他三个依赖的任务是同时执行的，build任务会在其他三个任务全部执行完成后才开始执行
gulp.task('build', ['copyIndex', 'copyImages', 'copyFiles'], function() {
  console.log('编译成功！');
});

// 文件有变化时自动执行任务
gulp.task('watch', function() {
  gulp.watch('index.html', ['copyIndex']);
  gulp.watch('images/**/*', ['copyImages']);
  gulp.watch(['xml/*.xml', 'json/*.json', '!json/secret-*.json'], ['copyFiles']);
});

gulp相关插件的使用

// npm install gulp-sass --save-dev
// npm install gulp-less --save-dev
// npm install gulp-connect --save-dev
// npm install gulp-concat --save-dev
// npm install gulp-uglify --save-dev
// npm install gulp-rename --save-dev
// npm install gulp-minify-css --save-dev
// npm install gulp-imagemin --save-dev

var gulp = require('gulp');
var sass = require('gulp-sass');
var less = require('gulp-less');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');

gulp.task('sass', function() {
  return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(minifyCss())
  .pipe(gulp.dest('dist/css'));
});
gulp.task('less', function() {
  return gulp.src('stylesheets/**/*.less')
  .pipe(sass())
  .pipe(gulp.dest('dist/css'));
});

gulp.task('server', function() {
  connect.server({
    root: 'dist',
    livereload: true
  });
});
gulp.task('copyIndex', function() {
  return gulp.src('index.html')
  .pipe(gulp.dest('dist'))
  .pipe(connect.reload());
});
gulp.task('watch', function() {
  gulp.watch('index.html', ['copyIndex']);
});
gulp.task('startServer', ['server', 'watch']);

gulp.task('concatUglifyJS', function() {
  return gulp.src(['javascript/**/*.js'])
  .pipe(concat('dist.js'))
  .pipe(gulp.dest('dist/js'))
  .pipe(uglify())
  .pipe(rename('dist.min.js'))
  .pipe(gulp.dest('dist/js'));
});

gulp.task('copyImages', function() {
  return gulp.src('images/**/*.{jpg,png}')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/images'));
});

[bingoogolapple]

Browsersync

基本使用

npm install -g browser-sync
npm init
npm install browser-sync --save-dev

git clone https://github.com/ninghao/forest
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"
Local   http://localhost:3000
UI        http://localhost:3001

browser-sync start --server forest --files "forest/index.html, forest/css/*.css" --tunnel
Tunnel https://ksyprjojxz.localtunnel.me

browser-sync start --proxy localhost:9090

整合到Gulp任务

npm install gulp --save-dev

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: './forest'
    },
    files: ['forest/index.html', 'forest/css/*.css']
  });
});

gulp browser-sync

[bingoogolapple]

Emmet

Cheat Sheet

版本号规则

bower

npm install -g bower
bower init
bower search packagename
bower info packagename
bower info packagename#version
bower install packagename [--save | --save-dev]
bower install packagename#version
bower list
// 检查更新  bower.json里的dependencies前的^表示可以更新版本号的第二位，~表示可以更新版本号的第三位
bower update
bower uninstall [--save | --save-dev]
// 如果之前安装的包在bower.json里找不到了，下面的命令会删除bower_components中对应包的目录
bower prune
// 查看本地缓存
bower cache list
// 从本地缓存安装
bower install packagename --offline --save
// 清空本地缓存
bower cache clean
// 修补版本号
bower version 1.1.1
bower version [major | minor | patch]
// 前提是有加入git版本控制，%s表示修改后返回的版本号
bower version patch -m '%s 消息'

.bowerrc文件中配置bower      http://bower.io/docs/config/

[bingoogolapple]

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

grunt

npm install -g grunt-cli
npm init
npm install grunt --save-dev

Gruntfile.js

module.exports = function(grunt) {
  // grunt  默认执行default这个任务
  grunt.registerTask('default', function() {
    console.log('Hello Grunt!');
    grunt.log.writeln('Hello Grunt!');
  });

  /*
   grunt greet:wanghao
   grunt greet:wh
   grunt greet:wh --force
  */
  grunt.registerTask('greet', function(name) {
    if (name.length < 3) {
      // wran 加上 --force 会继续执行
      grunt.warn('warn 名字太短了！')
      // fatal 加上 --force 不会继续执行
      grunt.fatal('fatal 名字太短了！')
    }

    grunt.log.writeln('Hello ' + name);
  });

  grunt.registerTask('greet1', function() {
    grunt.log.writeln('greet1');
  });
  grunt.registerTask('greet2', function() {
    grunt.log.writeln('greet2');
  });
  grunt.registerTask('greet3', function() {
    grunt.log.writeln('greet3');
  });
  // 链接多个任务
  grunt.registerTask('greetAll', ['greet1', 'greet2', 'greet3']);

  // 初始化配置
  grunt.initConfig({
    log: {
      foo: [1, 2, 3],
      bar: 'hello world',
      baz: false,
      pkg: grunt.file.readJSON('package.json')
    }
  });
  grunt.registerTask('testConfig', function() {
    grunt.log.writeln(grunt.config.get('log.bar'));
  });
  // grunt log          grunt log:bar
  grunt.registerMultiTask('log', 'Log stuff.', function() {
    grunt.log.writeln(this.target + ': ' + this.data);
  });

  grunt.registerTask('createFolders', function() {
    grunt.file.mkdir('dist/stylesheets');
  });
  grunt.registerTask('clean', function() {
    grunt.file.delete('dist');
  });
  grunt.registerTask('copyfile', function() {
    var content = grunt.template.process('<%= log.pkg.name %> 这个项目的作者是 <%= log.pkg.author %>');
    grunt.log.writeln(content);
    grunt.file.write('copyfile.txt', content);
  });
};

grunt相关插件的使用

// npm install grunt-contrib-copy --save-dev
// npm install grunt-contrib-watch --save-dev
// npm install grunt-contrib-connect --save-dev
// npm install grunt-contrib-sass --save-dev
// npm install grunt-contrib-less --save-dev
// npm install grunt-contrib-concat --save-dev
// npm install grunt-contrib-uglify --save-dev
// npm install grunt-contrib-cssmin --save-dev
// npm install grunt-contrib-imagemin --save-dev
module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');

  grunt.initConfig({
    imagemin: {
      dist: {
        expand: true,
        src: 'images/**/*.{png,jpg}',
        dest: 'dist/'
      }
    },
    cssmin: {
      dist: {
        src: 'dist/stylesheets/style.css',
        dest: 'dist/stylesheets/style.min.css'
      }
    },
    uglify: {
      dist: {
        src: '<%= concat.js.dest %>',
        dest: 'dist/javascript/dist.min.js'
      }
    },
    concat: {
      js: {
        options: {
          banner: '/* 开始 */\n',
          footer: '/* 结束 */\n'
        },
        src: ['javascript/app.js', 'javascript/modules/module.js'],
        dest: 'dist/javascript/dist.js'
      }
    },
    less: {
      dist: {
        files: {
          'dist/stylesheets/lstyle.css': 'stylesheets/lstyle.less'
        }
      }
    },
    sass: {
      dist: {
        options: {
          style: 'expanded'
        },
        files: {
          'dist/stylesheets/sstyle.css': 'stylesheets/sstyle.scss'
        }
      }
    },
    connect: { // 服务器只有grunt运行的时候才会运行
      server: {
        options: {
          port: 8000,
          base: 'dist',
          livereload: true
        }
      }
    },
    watch: {
      html: {
        files: ['index.html'],
        tasks: ['copy:html'],
        options: {
          livereload: true
        }
      }
    },
    copy: {
      html: {
        src: 'index.html',
        dest: 'dist/'
      },
      style: {
        src: 'stylesheets/*.css',
        dest: 'dist/'
      },
      js: {
        src: 'javascript/**/*.js',
        dest: 'dist/'
      }
    }
  });

  grunt.registerTask('startServer', ['connect', 'watch']);
  grunt.registerTask('concatUglify', ['concat', 'uglify']);
};
// grunt copy
// grunt copy:html
// grunt watch
// grunt connect:server
// grunt connect:server:keepalive
// grunt startServer
// grunt sass
// grunt less
// grunt concat
// grunt concatUglify
// grunt cssmin
// grunt imagemin

[bingoogolapple]

babel

'use strict';

let breakfast = (dessert, drink) => dessert + drink;

let fruits = ['苹果', '梨子'],
    foods = [...fruits, '蛋糕'];

console.log(foods);

/*
npm install babel-cli --save-dev
./node_modules/.bin/babel --help
./node_modules/.bin/babel script.js
./node_modules/.bin/babel script.js --out-file script-compiled.js
./node_modules/.bin/babel src --watch --out-dir lib
*/

/*
在package.json的scripts里面添加babel命令

{
  "name": "studybabel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src --watch --out-dir lib"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.5.1",
    "babel-cli": "^6.5.1",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2"
  }
}

npm run build
*/

// npm install babel-preset-es2015 --save-dev
// npm install babel-preset-react --save-dev
/*
.babelrc 是babel的配置文件，指定想要使用的预设

{
  "presets": ["es2015", "react"]
}
*/

/*
npm install gulp gulp-babel --save-dev
*/

[bingoogolapple]

jspm

npm install jspm -g
npm init
npm install jspm --save-dev
jspm init

jspm install jquery=github:components/jquery
jspm uninstall jquery

可根据这个网址简写 https://github.com/jspm/registry/blob/master/registry.json
jspm install jquery

jspm bundle app/main app/build.js

加上--inject后会在config.js中添加bundles信息，这样就不用在html中添加<script src="app/build.js"></script>
jspm bundle app/main app/build.js --inject

[bingoogolapple]

webpack

webpack的GitHub地址 webpack cli 插件列表地址 该笔记对应的代码地址 shopping例子

chrome调试时可通过 command + o 根据文件名快速打开文件 require('style!css!./admin.css'); // loader是从右到左执行，先执行css-loader，再执行style-loader

安装

npm install webpack -g
webpack --help

npm init
npm install webpack --save-dev

// 打包
webpack

模块热替换 执行「webpack-dev-server --inline --hot」，这条也可以加到package.json里，访问「http://localhost:8080」

npm install webpack-dev-server --global
npm install webpack-dev-server --save-dev

css相关

// css-loader 读取css文件和处理css文件里的一些url，比如可以改css里image的相对路径或绝对路径
// style-loader 把css-loader读取的css文件内容用js写到页面的style标签里
npm install css-loader style-loader --save-dev

js相关

// es2015
npm install babel-loader babel-core babel-preset-es2015 --save-dev

// react
npm install babel-preset-react react-hot-loader --save-dev

安装react

npm install react react-dom --save

.babelrc

{
  "presets": ["es2015", "react"]
}

webpack.config.js

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'react-hot!babel'},
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
};

package.json 在package.json中scripts里添加「"watch": "webpack-dev-server --inline --hot"」后直接在命令行执行「npm run watch」

{
  "name": "studywebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack-dev-server --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  }
}

[bingoogolapple]

YEOMAN

官网 搜索generators

npm install -g yo
yo --version
npm install -g generator-react-webpack
npm ls -g --depth=1 2>/dev/null | grep generator-    // --depth=1限制树状结构最多向下显示一层；2表示标准错误，/dev/null空设备文件