123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- module.exports = function(gulp, plugins) {
- var argv = require('yargs').argv,
- chalk = require('chalk'),
- moment = require('moment'),
- browserSync = require('browser-sync'),
- reload = browserSync.reload,
- log = console.log;
-
- var win32 = process.platform === 'win32';
- var that = this;
- that.port = +argv.p || 3000;
- var pkg = require('../package.json');
- var banner = '/*!' + '\n * @project : ' + pkg.name + '\n * @version : ' + pkg.version + '\n * @author : ' + pkg.author + '\n * @update : ' + moment().format('YYYY-MM-DD h:mm:ss a') + '\n */\r';
-
- gulp.task('dev_conn', function() {
- browserSync({
- ui:false,
- server: {
- baseDir: "src",
- directory: true
- },
- notify: false,
- ghostMode:false,
- port: that.port,
- open: "external",
- browser: "/Applications/Google\ Chrome.app/"
- },function(err, arg){
- if (argv.q) {
- var url = arg.options.get('urls').get('external')
- var qrcode = require('qrcode-terminal')
- qrcode.generate(url);
- }
- })
- })
- gulp.task('dev_sass', function() {
- function sassCompile4win(){
- function normalizeErr(err){
- var path = require('path')
- var cwd = path.join(__dirname, '..')
- var relativePath = path.relative(cwd, err.file)
- return relativePath+' @'+err.line+':'+err.column+'\n'+err.message
- }
- var config = {
- onError: function(err){
- return plugins.notify().write(normalizeErr(err))
- }
- }
- return plugins.sass(config)
- }
- function sassCompile4nix(){
- function handler(){
- return plugins.notify.onError({
- title:'sass编译错误',
- message:'<%=error.message%>'
- })
- }
- return plugins.sass().on('error', handler())
- }
-
- if(argv.n){
- return gulp.src('src/sass/*.scss')
- .pipe(plugins.cached('sass', {optimizeMemory: true}))
- .pipe(win32? sassCompile4nix() : sassCompile4nix())
- .pipe(plugins.autoprefixer({browsers: ['> 0%']}))
- .pipe(plugins.remember('sass'))
- .pipe(gulp.dest('src/css'))
- .pipe(reload({stream:true}))
- }
- return gulp.src('src/sass/*.scss')
- .pipe(plugins.plumber())
- .pipe(plugins.sourcemaps.init())
- .pipe(win32? sassCompile4nix() : sassCompile4nix())
- .pipe(plugins.sourcemaps.write({includeContent: false, sourceRoot: '../sass/'}))
- .pipe(gulp.dest('src/css'))
- .pipe(reload({stream:true}))
- })
- gulp.task('dev_ejs', function() {
- return gulp.src('src/tpl/*.ejs')
- .pipe(plugins.ejs().on('error', console.log))
- .pipe(gulp.dest('src/'))
- .pipe(reload({stream:true}))
- })
- gulp.task('dev_svg', function() {
- function renameSvg(p){
- p.basename = 'symbols'
- }
- return gulp.src('src/svg/slice/*.svg')
- .pipe(plugins.svgSymbols({templates: ['default-svg']}))
- .pipe(plugins.rename(renameSvg))
- .pipe(gulp.dest('src/svg'))
- .pipe(reload({stream:true}))
- })
-
- gulp.task('dev_slice2css', function(){
- var fs = require('fs')
- var path = require('path')
- var async = require('gulp-uglify/node_modules/uglify-js/node_modules/async')
- var getPixels = require('multi-sprite/node_modules/spritesmith/node_modules/pixelsmith/node_modules/get-pixels')
- var ejs = require('gulp-ejs/node_modules/ejs')
- var classnameRule = function(fileName, p){
- var relPath = path.relative('src/img/slice', path.dirname(p))
- var name = win32? path.join(relPath, fileName).replace(/\\/g, '-'):path.join(relPath, fileName).replace(/\//g, '-')
- return name
- }
- var pageWidth = argv.w, isProcessREM = !!argv.w, data = {}, files
- async.series([
-
- function(next){
- var glob = require("glob")
- files = glob.sync("src/img/slice/**", {nodir:true})
- files = files.filter(function(f){
- return !~(path.basename(f).indexOf('@'))
- })
- next(null)
- },
-
- function(next){
- var arr = data.slice = []
- async.eachSeries(files, iterator, callback)
- function iterator(f, _next){
- getPixels(f, function (err, pixels) {
- if(err){return}
- arr.push({
- filepath: f,
- imageurl: path.relative('src/sass', f).split(path.sep).join('/'),
- classname: classnameRule.call({}, path.basename(f, path.extname(f)), f),
- width: formatPX(pixels.shape[0]),
- height: formatPX(pixels.shape[1]),
- cover: isProcessREM?'background-size:cover;':''
- })
- _next(null)
- function formatPX (pxValue) {
- if (!pageWidth) {return pxValue+'px'}
- if (+pageWidth === 1) { return pxValue*16/720+'rem' }
- return (pxValue*16/+pageWidth)+'rem'
- }
- })
- }
- function callback(err, result){
- next(null)
- }
- },
-
- function(next){
- var tpl = (function(){
- }).toString().split('\n').slice(1, -1).join('\n')
- var css = ejs.render(tpl, data).replace(/^\n/mg, '')
- fs.writeFileSync('src/sass/_slice.scss', css)
- }
- ])
- })
- gulp.task('default', ['dev_conn'], function(){
- gulp.watch('src/img/slice/**', ['dev_slice2css'])
- gulp.watch('src/svg/slice/**', ['dev_svg'])
- gulp.watch('src/tpl/**', ['dev_ejs'])
- gulp.watch('src/sass/**', ['dev_sass'])
- gulp.watch('src/img/**', reload)
- gulp.watch('src/svg/**', reload)
- gulp.watch('src/js/**', reload)
- gulp.watch('src/*.html', reload)
- })
- }
|