从零开始构建前端和reactjs - 0

从零开始构建前端和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"]);
});