从零开始构建前端和reactjs 每个工作日更新
前端半路出家,很多都是新概念,只能一步一步来搭建这个,资料全部都来源于网上
开始吧
首先 ,nodejs 、git,怎么安装 ,自己百度吧。
1.安装好这些之后 ,打开window powershell,输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
切换npm到淘宝的源,
2.上https://git.oschina.net/ 注册个账号,创建个项目,怎么创建,自行百度。
3.选个目录,在你本地克隆 项目
cd e:work
git clone http......
2.选择构建插件,有两个grunt、gulp, 我选的是gulp, 就一个原因,它有个gulp-sass插件,在写sass比较方便,不需要再装其它的软件了,运行下面一大堆命令吧 ,安装过程,有任何看不懂的,请自行百度 或者翻译
#reactDemo
#npm install -g cnpm --registry=https://registry.npm.taobao.org
#npm install --global gulp
npm install --save-dev gulp
#js测试
npm install -–save-dev gulp-jshint
#js压缩
npm install -–save-dev gulp-uglify
#js合并
npm install -–save-dev gulp-concat
# 自动根据配置下载插件 gulp-load-plugins
npm install -–save-dev gulp-load-plugins
# Browsersync
npm install -g browser-sync
npm install browser-sync gulp --save-dev
#gulp-sass
npm install gulp-sass gulp --save-dev
#npm install -g bower
bower init
#bower install jquery
#bower install --save react
#gulp-sass
npm install gulp-sass gulp --save-dev
# 执行文件监听任务,如:监听sass文件修改过后编译,但是sass文件有语法错误,这个时候会导致管道(pipe)撕裂,gulp中断!
npm install --save-dev gulp-plumber
#webpack 它是啥 你猜 https://webpack.github.io/docs/tutorials/getting-started/
npm install webpack -g
npm install css-loader style-loader
webpack ./app/test/webpack/entry.js ./app/test/webpack/bundle.js
webpack ./entry.js bundle.js --module-bind "css=style!css"
webpack ./app/test/webpack/entry.js ./app/test/webpack/bundle.js --module-bind "css=style!css"
#不想手动编译 用这个命令
webpack --progress --colors --watch
#开发模式 说是放内存中 没太理解 再议
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
#理解了 跟gulp一样 开个serve 坑
# use var json = require("json!./file.json");
npm install json-loader
npm install sass-loader node-sass webpack --save-dev
#开始 react webpack插件
npm install --save-dev react-hot-loader
2,gulpfile.js 慢慢看吧
参考资料 :http://www.browsersync.io/docs/gulp/
https://github.com/gulpjs/gulp/blob/master/docs/API.md
http://www.cnblogs.com/Leo_wl/p/4967483.html
/* 版本1
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
//压缩js
gulp.task('minify', function () {
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
// js/app.js 精确匹配文件
//js/*.js 仅匹配js目录下的所有后缀为.js的文件
// js/*/ // .js 匹配js目录及其子目录下所有后缀为.js的文件
//!js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
//*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件
// 排除后缀为.min.js的文件 gulp.src(['js/**/*.js', '!js/**/*.min.js'])
/* 版本1
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
*/
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins(),
sass= require('gulp-sass'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync') ;
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./app/test/webpack/webpack.config.js");
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
});
gulp.task('watch', function () {
/* gulp.watch('templates/*.tmpl.html', ['build']);
gulp.watch('templates/*.tmpl.html', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});*/
var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
//监听 chang事件
/*
除了change事件,还可以监听很多其他的事件:
end 在watcher结束时触发(这意味着,在文件改变的时候,任务或者回调不会执行)
error 在出现error时触发
ready 在文件被找到并正被监听时触发
nomatch 在glob没有匹配到任何文件时触发
Watcher对象也包含了一些可以调用的方法:
watcher.end() 停止watcher(以便停止执行后面的任务或者回调函数)
watcher.files() 返回watcher监听的文件列表
watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)
watcher.remove(filepath) 从watcher中移除个别文件
*/
watcher.on('change', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
});
gulp.task('browser-sync', function () {
var files = [
'app/**/*.html',
'app/assets/css/**/*.css',
'app/assets/imgs/**/*.png',
'app/assets/js/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './app'
}
});
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/styles/*.scss")
.pipe(plumber())
.pipe(sass())
.pipe(plumber.stop())
.pipe(gulp.dest("app/css"))
//.pipe(browserSync.stream())
.pipe(browserSync.reload({stream: true}));;
});
// gulp.task('default', ['serve']);
gulp.task('test', ['sass'], function() {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/**/*.js'
];
//browserSync();
browserSync.create().init({
files: ["app/css/*.css", "app/**/*.js","app/**/*.html"],
server:{
baseDir:"app",//["app","bower_components"],
},
port:8080
});
gulp.watch("app/styles/*.scss", ['sass']);
// gulp.watch(["app/**/*.html","app/**/*.js"]).on('change', browserSync.reload);
});
//加进webpack 之后
gulp.task("webpack1", function(callback) {
// run webpack
var myConfig = Object.create(webpackConfig);
webpack(myConfig, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
colors: true
}));
callback();
});
});
gulp.task("webpack2", function(callback) {
// run webpack
var myConfig = Object.create(webpackConfig);
webpack(myConfig, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
colors: true
}));
callback();
});
//gulp.watch(["app/**/*"], ["webpack:build-dev"]);
});
//# gulp webpack
gulp.task('test1', ['webpack1'], function() {
browserSync.create().init({
files: ["app/css/*.css", "app/**/*.js","app/**/*.html"],
server:{
baseDir:"app",//["app","bower_components"],
},
port:8080
});
gulp.watch("app/styles/*.scss", ['sass']);
gulp.watch(["app/**/*"], ["webpack1"]);
});