bingoogolapple.github.io
bingoogolapple.github.io copied to clipboard
Published
20 hours ago •
bingoogolapple
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'));
});
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
Emmet
版本号规则
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/
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
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
*/
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
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"
}
}
YEOMAN
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空设备文件