gulp

详情请参见github:

　　https://github.com/Sunnshino/gulpjs-plugs

  1 /*
  2     目录结构:
  3         test(主目录)
  4             src(输入路径)
  5                 index.html(主页面)
  6                 js(文件夹)
  7                 less(文件夹)
  8                 images(文件夹)
  9                 html(文件夹)
 10             dest(输出路径)
 11                 js(文件夹)
 12                 less(文件夹)
 13                 img(文件夹)
 14                 html(文件夹)
 15                 
 16         说明:
 17         paths里面有:
 18             script:
 19                 src:来自路径
 20                 dest:目的路径
 21                 watch:监听路径
 22 */
 23 let gulp = require('gulp'),
 24     del = require('del'),
 25     browserSync = require("browser-sync").create();
 26 let $ = require('gulp-load-plugins')();
 27 
 28 
 29 // 路径选项
 30 var paths = {
 31     script: {
 32         src: 'src/js/*.js',
 33         dest: 'dest/js/',
 34         watch: 'src/js/*.js'
 35     },
 36     less: {
 37         src: 'src/less/*.less',
 38         dest: 'dest/less/',
 39         watch: 'src/less'
 40     },
 41     images: {
 42         src: 'src/images/*.*',
 43         dest: 'dest/img/',
 44         watch: 'src/images/*.*'
 45     },
 46     html: {
 47         src: 'src/html/*.html',
 48         dest: 'dest/html',
 49         watch: 'src/*.html'
 50     }
 51 };
 52 
 53 gulp.task('delete', function(cb) {
 54     return del(['dest/*', '!dest/images'], cb);
 55 });
 56 
 57 
 58 // 文件热更新
 59 // gulp.task('reload', function() {
 60 //     gulp.src('/')
 61 //         .pipe($.connect.reload())
 62 //     console.log('html change!')
 63 // });
 64 
 65 //压缩html  
 66 gulp.task('html', function() {
 67     var options = {
 68         removeComments: true,
 69         collapseWhitespace: true,
 70         removeScriptTypeAttributes: true,
 71         removeStyleLinkTypeAttributes: true,
 72         minifyJS: true,
 73         minifyCSS: true
 74     };
 75     // 来自
 76     gulp.src('src/index.html')
 77         .pipe($.changed('dest', { hasChanged: $.changed.compareSha1Digest }))
 78         .pipe($.htmlmin(options))
 79         .pipe(gulp.dest('dest'))
 80         .pipe(browserSync.reload({ stream: true }));
 81 });
 82 
 83 
 84 //压缩js以及重命名 
 85 gulp.task("script", function() {
 86     // 来自路径
 87     gulp.src(['src/js/jquery.js', 'src/js/index.js'])
 88         .pipe($.changed(paths.script.dest, { hasChanged: $.changed.compareSha1Digest }))
 89         .pipe($.jshint())
 90         .pipe($.babel())
 91         .pipe($.jshint.reporter())
 92         .pipe($.concat('index.js'))
 93         .pipe($.uglify())
 94         .pipe($.rename('index.min.js'))
 95         .pipe($.obfuscate())
 96         .pipe(gulp.dest(paths.script.dest))
 97         .pipe(browserSync.reload({ stream: true }));
 98 });
 99 
100 //实时编译less  
101 gulp.task('less', function() {
102     gulp.src([paths.less.src])
103         .pipe($.changed(paths.less.src, { hasChanged: $.changed.compareSha1Digest }))
104         .pipe($.less())
105         .pipe($.tobase64({
106             maxsize: 8
107         }))
108         .pipe($.concat('main.css'))
109         .pipe($.cleanCss())
110         .pipe(gulp.dest(paths.less.dest))
111         .pipe(browserSync.reload({ stream: true }));
112 });
113 
114 
115 // 压缩图片  
116 gulp.task('images', function() {
117     gulp.src(paths.images.src)
118         .pipe($.changed(paths.images.dest, { hasChanged: $.changed.compareSha1Digest }))
119         .pipe($.imagemin({
120             progressive: true,
121             svgoPlugins: [{ removeViewBox: false }],
122             // use: [$.imageminPngquant()]
123         }))
124         .pipe(gulp.dest(paths.images.dest))
125         .pipe(browserSync.reload({ stream: true }));
126 });
127 
128 //启动服务器热加载  
129 gulp.task('server', ['delete'], function() {
130     gulp.start('html', 'less', 'script', 'images');
131     browserSync.init({
132         port: 8088,
133         server: {
134             baseDir: ['dest']
135         },
136         livereload: true
137     });
138 
139     //监控文件变化，自动更新(自添加规则) 
140     gulp.watch(paths.script.watch, ['script']);
141     gulp.watch(paths.less.watch, ['less']);
142     gulp.watch(paths.html.watch, ['html']);
143     gulp.watch(paths.images.watch, ['images']);
144 });
145 
146 gulp.task('default', ['server']);
posted @ 2017-10-30 14:08  Sunsin  阅读(170)  评论(0)  编辑  收藏  举报