gulp實現的多瀏覽器同步刷新工具
阿新 • • 發佈:2018-03-31
mini eat scrip IT log 不同 .get pan dir
在項目根目錄中,創建一個gulpfile.js的文件,其作用是命令行中執行 gulp 任務名 時,會執行gulpfile.js中的一個同名任務。
1 var gulp = require(‘gulp‘);
2 var less = require(‘gulp-less‘); //less轉化為css
3 var cssnano = require(‘gulp-cssnano‘); //css壓縮
4 var browserSync = require(‘browser-sync‘).create(); //多瀏覽器同步
5 var htmlmin = require(‘gulp-htmlmin‘); // 壓縮html
6 var concat = require(‘gulp-concat‘); //合並不同的js文件
7 var uglify = require(‘gulp-uglify‘); //js壓縮混淆
8
9
10 gulp.task(‘copy‘,function(){
11 gulp.src(‘src/index.html‘)
12 .pipe(gulp.dest(‘dist‘))
13 });
14
15 //刷新css
16 gulp.task(‘style‘,function(){
17 gulp.src(‘src/styles/*.less‘)
18 .pipe(less())
19 .pipe(cssnano())
20 .pipe(gulp.dest(‘dist/css/‘))
21 .pipe(browserSync.reload({
22 stream:true
23 }));
24 });
25
26 //html去除多余空格
27 gulp.task(‘minify‘,function(){
28 gulp.src(‘src/*.html‘)
29 .pipe(htmlmin({collapseWhitespace:true }))
30 .pipe(gulp.dest(‘dist‘))
31 .pipe(browserSync.reload({
32 stream:true
33 }));
34 });
35 //js合並 壓縮混淆
36 gulp.task(‘script‘,function(){
37 gulp.src(‘src/scripts/*.js‘)
38 .pipe(concat(‘all.js‘))
39 .pipe(uglify())
40 .pipe(gulp.dest(‘dist/scripts‘))
41 .pipe(browserSync.reload({
42 stream:true //瀏覽器重新載入
43 }));
44 });
45
46 //復制照片
47 gulp.task(‘image‘,function(){
48 gulp.src(‘src/imgs/*.*‘)
49 .pipe(gulp.dest(‘dist/imgs‘))
50 .pipe(browserSync.reload({
51 stream:true
52 }));
53 });
54
55 //多瀏覽器同步刷新的主要部分,啟動服務後,src中的文件有變動,就會觸發watch,從而執行相應的任務。
56 gulp.task(‘serve‘,function(){
57 browserSync.init({
58 server:{
59 baseDir : ‘dist‘
60 }
61 },function(err,bs){
62 console.log(bs.options.getIn([‘urls‘,‘local‘]));
63 });
64 gulp.watch(‘src/styles/*.less‘,[‘style‘]);
65 gulp.watch(‘src/*.html‘,[‘minify‘]);
66 gulp.watch(‘src/scripts/*.js‘,[‘script‘]);
67 gulp.watch(‘src/imgs/*.*‘,[‘image‘]);
68 });
gulp實現的多瀏覽器同步刷新工具