使用gulp构建前端自动化的方法示例(2)

<!-- build:js ./js/public.js --> <script src="https://www.jb51.net/article/js/jquery-1.12.4.min.js"></script> <script src="https://www.jb51.net/article/js/myAlbum.js"></script> <!-- endbuild -->

最后生成的html为:

<script src="https://www.jb51.net/article/js/public-93c275a836.js"></script>

具体的语法规则可以参见gulp-useref

创建本地服务器并实现自动刷新

使用connet.server()来创建一个本地服务器,利用gulp.watch()来对src下的文件进行监测,如果发生变化,则执行编译less为css和刷新页面的任务。

gulp.task('connect', () => { connect.server({ root: 'src', livereload: true, port: 8888 }) }) gulp.task('reload', () => { gulp.src('src/*.html') .pipe(connect.reload()) }) gulp.task('watch', () => { gulp.watch('src/**/*', ['src:css', 'reload']) })

完整的代码可以参见github

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/2e4c2b62aeac8e2531888a1f2a4126db.html