Code Monkey home page Code Monkey logo

gulp-webpack-demo's Introduction

注意: 该demo15年构建,已经不维护了,当时还是采用1.0版本的webpack。现在webpack已经更新到2.0+,更多新功能和修改请参考官网


项目相关文章说明请见 gulp + webpack 构建多页面前端项目

由于关注该主题的人比较多,所以还是整理了一下手上项目,给出了一个简单的demo, 希望能提供一些思路。 你可能还需要根据项目情况做调整。

为了支持类似fis的__inline__sprite语法(base64和雪碧图),对依赖包gulp-css-base64gulp-css-spriter都做了修改,所以暂时保留在node_modules中。你可以不必再下载这两个包。

安装依赖包: npm install

开发: gulp dev

发布: gulp

Update: 2017.2.24 -- devtool: 'source-map' 改为 '#source-map', 兼容新版Chrome规则。

gulp-webpack-demo's People

Contributors

fwon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gulp-webpack-demo's Issues

你的demo只能跑在webpack服务上

你好,我把你的代码拉下来后,用自己的服务器跑起来js就报错了,只有在webpack服务上跑才可以,请问这个问题应该怎么解决。谢谢!

自动热部署之后运行报错

修改源文件之后会自动热部署,这时候刷新页面会报各种错,错误信息1如下:
main.js:3 Uncaught TypeError: Cannot set property 'slider' of undefined
at Object. (main.js:3)
at t (bootstrap f2c53995d62835b075d5:26)
at window.webpackJsonp (bootstrap f2c53995d62835b075d5:84)
at (index):1

错误信息2:
Uncaught TypeError: Cannot read property 'call' of undefined
at t (bootstrap f2c53995d62835b075d5:26)
at jquery.min.js:4
at K (jquery.min.js:2)
at Object. (jquery.min.js:2)
at t (bootstrap f2c53995d62835b075d5:26)
at Object. (main.js:2)
at t (bootstrap f2c53995d62835b075d5:26)
at window.webpackJsonp (bootstrap f2c53995d62835b075d5:84)
at (index):1

加md5有问题

//将js加上10位md5,并修改html中的引用路径,该动作依赖build-js

gulp.task('md5:js', ['build-js'], function (done) {
     gulp.src('dist/js/*.js')
        .pipe(md5(10, 'dist/app/*.html'))
        .pipe(gulp.dest('dist/js'))
        .on('end', done);
});

如gulp 3次,dist文件夹会出现像下面一样
news-list_fcffee5ba9.js
news-list_fcffee5ba9_fcffee5ba9.js
news-list_fcffee5ba9_fcffee5ba9_fcffee5ba9.js

.on('end', done)

gulp每一个任务最后加一行 .on('end', done) 是什么意思?

md5:js

gulp.task('md5:js', ['build-js'], function (done) {
gulp.src('dist/js/.js')
.pipe(md5(10, 'dist/app/
.html'))
.pipe(gulp.dest('dist/js'))
.on('end', done);
});

这样会在dist 下重新再生成一份带版本号的js, dist 下会有两份一份带版本号的 一份不带版本号的

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.