最近学习前端,然后师兄给了一个工具gulp,要我学习,我就自己去尝试一下,
1.ruby环境OK
2.node.js安装好
3.服务器搭建好
4.gulpfile.js 都是copy网上论坛的的。。。。
代码如下
// 载入外挂 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' } }); gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload); });
顺便把其他的也贴出来吧。。。
// 样式 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' })); }); // 脚本 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' })); }); // 图片 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' })); }); // 清理 gulp.task('clean', function() { return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe(clean()); }); // 预设任务 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // 看手 gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/styles/**/*.scss', ['styles']); // 看守所有.js档 gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档 gulp.watch('src/images/**/*', ['images']); // 建立即时重整伺服器 var server = livereload(); // 看守所有位在 dist/ 目录下的档案,一旦有更动,便进行重整 gulp.watch(['dist/**']).on('change', function(file) { server.changed(file.path); }); });
然后在尝试安装browser-sync这个插件时就出现错误,因为只是学习工具的用法,还没有接触node.js,一点也看不明白,但是在别人的截图上可以看出 运行 gulp serve 指令后会自动弹出一个在服务器运行的网页,只要一保存,就是ctrl+S,就可以实现自动刷新。。。。。。。。。。。而我没有,因为看不明白安装时出现的提示,所以只能来这里提问学习。其他原因我想不出来,望大神指点
gulp需要全局安装一次,然后在项目所在目录再安装一次,把gulpfile.js文件放在项目根目录下,控制台命令运行gulp。配合wampserver并修改apatch域名映射(具体操作请参考:http://blog.sina.com.cn/s/blog_a43350970102weiq.html),将项目放在wampserver下的www文件夹,将网址127.0.1/3000/项目名/test.html改为你的IP地址/3000/项目名/test.html,就可以用手机自动刷新同步测试你的项目了