The Great God asked for help. There are pictures to see about the problems in gulp installation.

  node.js, question

安装browser-sync

package.json

运行serve 指令

Recently, I studied at the front end, and then my senior brother gave me a tool gulp. If I want to study, I will try it myself.
1.ruby环境OK
2.node.js安装好
3.服务器搭建好

4.gulpfile.js belongs to the copy online forum. . . .
The code is as follows

//Load plugin
 var gulp = require('gulp'),
 sass = require('gulp-ruby-sass'),
 autoprefixer = require('gulp-autoprefixer'),
 minifycss = require('gulp-minify-css'),
 jshint = require('gulp-jshint'),
 uglify = require('gulp-uglify'),
 imagemin = require('gulp-imagemin'),
 rename = require('gulp-rename'),
 clean = require('gulp-clean'),
 concat = require('gulp-concat'),
 notify = require('gulp-notify'),
 cache = require('gulp-cache'),
 livereload = require('gulp-livereload');
 var browserSync = require('browser-sync');
 var reload = browserSync.reload;
 // watch files for changes and reload
 gulp.task('serve', function() {
 browserSync({
 server: {
 baseDir: 'app'
 bracket
 });
 
 gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
 });

By the way, post the rest. . .

//style
 gulp.task('styles', function() {
 return gulp.src('src/styles/main.scss')
 .pipe(sass({ style: 'expanded', }))
 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
 .pipe(gulp.dest('dist/styles'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(minifycss())
 .pipe(gulp.dest('dist/styles'))
 .pipe(notify({ message: 'Styles task complete' }));
 });
 
 //script
 gulp.task('scripts', function() {
 return gulp.src('src/scripts/**/*.js')
 .pipe(jshint('.jshintrc'))
 .pipe(jshint.reporter('default'))
 .pipe(concat('main.js'))
 .pipe(gulp.dest('dist/scripts'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(uglify())
 .pipe(gulp.dest('dist/scripts'))
 .pipe(notify({ message: 'Scripts task complete' }));
 });
 
 //picture
 gulp.task('images', function() {
 return gulp.src('src/images/**/*')
 .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
 .pipe(gulp.dest('dist/images'))
 .pipe(notify({ message: 'Images task complete' }));
 });
 
 //clean up
 gulp.task('clean', function() {
 return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false})
 .pipe(clean());
 });
 
 //Scheduled Tasks
 gulp.task('default', ['clean'], function() {
 gulp.start('styles', 'scripts', 'images');
 });
 
 //Look at your hands
 gulp.task('watch', function() {
 
 //The detention center has. scss files.
 gulp.watch('src/styles/**/*.scss', ['styles']);
 
 //The detention center has. js files.
 gulp.watch('src/scripts/**/*.js', ['scripts']);
 
 //The detention center has picture files.
 gulp.watch('src/images/**/*', ['images']);
 
 //Create a real-time reorganization server
 var server = livereload();
 
 //There is a file in the dist/ directory in the detention center. Once there is any change, it will be reorganized.
 gulp.watch(['dist/**']).on('change', function(file) {
 server.changed(file.path);
 });
 
 });

Then there was an error when trying to install browser-sync, because it was just learning the usage of the tool and had not touched node.js. it was not clear at all, but it could be seen from other people’s screenshots.gulp serveAfter the instruction, a web page running on the server will pop up automatically. once saved, ctrl+s can be used to refresh automatically. . . . . . . . . . . But I didn’t, because I couldn’t understand the prompts that appeared during the installation, so I could only come here to ask questions and learn. I can’t think of other reasons. I hope the great god can give me some advice.

Gulp needs to be installed globally once, and then installed again in the directory where the project is located. put the gulpfile.js file under the root directory of the project, and the console command runs gulp. Cooperate with wampserver and modify apatch domain name mapping (refer to:http://blog.sina.com.cn/s/blog_a43350970102weiq.html), put the project in the www folder under wampserver, change the web address 127.0.1/3000/ project name /test.html to your IP address /3000/ project name /test.html, and then you can use your mobile phone to automatically refresh and synchronously test your project.